Bourbon Neat - 移动柱垂直对齐？

Question

我想将我的列与HTML源顺序不同地对齐。我试图使用shift（）来做到这一点，但我遇到了水平对齐它们的问题。

为了更好地展示我的问题，我把这个CodePen放在一起： http://codepen.io/anon/pen/gaBYJB?editors=110

HTML

<h1>Resize the browser</h1>
<p>Mobile should be 1, 2, 3 stacked. But desktop should be 3, 1, 2. They do not align correctly horizontally.</p>
<div class="items">
  <div class="item item_1">1</div>
  <div class="item item_2">2</div>
  <div class="item item_3">3</div>
</div>

SCSS

@import "bourbon";
@import "neat";

$bp: new-breakpoint(min-width 768px 12);

body {

  padding: 20px;

}

.items {

  @include row();

  background: #333;
  padding: 20px;

}

.item {

  @include span-columns(12);

  padding: 20px;
  color: #fff;
  font-size: 22px;
  background: #666;

  &_1 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(6);
    }

  }

  &_2 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(9);
    }

  }

  &_3 {

    @include media($bp) {
      @include span-columns(6);
      @include shift(-12);
    }

  }

}

移动应该是1,2,3堆叠（已经很好）。但是桌面应该是3,1,2。它们不能正确地水平对齐。

如何通过正确的垂直对齐实现此布局？第1项似乎正在推动其他人。

Answer 1

我能够通过将第2项上的shift(9)替换为omega()混合来删除右边距（参见Codepen），从而对部分解决方案进行编码。 shift(9)不是必需的，因为项目2由项目1的移位推动。

@include omega();
//@include shift(9);

然而，Neat似乎仍有问题，第3项的左边距为零。因此，更好的解决方案可能是嵌套第1列和第2列并移动父级和第3项（请参阅Codepen）。

.item_group {
  @include media($bp) {
  @include span-columns(6);
  @include shift(6);
}
...
&_1 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_2 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_3 {
  @include media($bp) {
    @include span-columns(6);
    @include shift(-12);
  }
}