Html 使用Bourbon neat为每2个孩子反转行方向

我正在尝试使用Bourbon Neat

reset layout direction

mixin为每2个孩子反转行布局。但是，使用第n个子伪选择器似乎不起作用。我做错了什么？这是你的电话号码

HTML

<div class="boxes">
  <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>
</div>

---

编辑：我已经想出了这个解决方案，但它只是愚蠢的。我不需要以这种方式重复样式-

我看到两个选项。首先，我们可以使用

：nth child

来定位偶数行，但也可以使用它来定位奇数行。仍然有一些看起来重复的代码，以使整洁的工作，但至少移动到一个新的规则，以减少重复共享代码

HTML

您也可以使用Flexbox。与上面相同的HTML标记。我们使用Neat来获得适当的列宽，然后删除所有子项的边距。然后使用Flexbox分隔柱，留下一个檐槽。在偶数行上，我们使用

flex-direction:row-reverse以反转两侧

CSS

绝对更少的代码。CodePen:
我尝试过flexbox选项，但行反转似乎不起作用：（我在内置演示的答案中添加了一支笔。
.project{
  @include row();
  //@include row($direction: RTL); //Works here and rightly reverses all rows. 

  .project__image, .project__text {
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
    @include span-columns(3 of 6);
    @include omega(2n);
  }

  &:nth-child(2n + 2){
        color: red;
    //@include row($direction: RTL); Doesn't work here
        }
}

<div class="boxes">
  <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>

   <div class="project">
    <div class="project__image">image</div>
    <div class="project__text">text</div>
  </div>
  <!-- And so on... -->
</div>

// Visual styles here.
.project {
  @include row($direction: LTR);

  .project__image,
  .project__text {
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
  }
}

// These are your odd rows. Even minus one.
.project:nth-child(2n-1) {
  //@include row($direction: RTL); //Works here and rightly reverses all rows. 
  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
  }
}

These are your even rows.
.project:nth-child(2n) {
  @include row($direction: RTL);

  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
  }
}

.project {
  display: flex;
  justify-content: space-between;

  .project__image,
  .project__text {
    @include span-columns(3 of 6);
    @include omega(2n);
    margin-right: 0;
    background: tint(red,50%);
    margin-bottom: 20px;
    height: 130px;
  }
}

.project:nth-child(2n) {
  flex-direction: row-reverse;
}