使用 Neat 网格使列顺序与源顺序不同？答案

【问题标题】：Make column order different to source order with Neat grids?使用 Neat 网格使列顺序与源顺序不同？
【发布时间】：2016-01-20 12:29:29
【问题描述】：

我正在为 Bourbon 使用 Neat 网格框架。我怎样才能让列的布局与源顺序不同？

所以在下面的示例中，testB 在源代码顺序中位于 testC 之前。但我希望左栏为 testC，右栏为 testB。

.testA {
  @include outer-container;
}

.testB {
  @include span-columns(6);
  @include shift(6);
}

.testC {
  @include span-columns(6);
  @include shift(-6);
}

<div class="testA">
    <div class="testB">1</div>
    <div class="testC">2</div>
</div>

我需要这个：

我已经解决了这个问题，但我不确定这是否是正确的方法：

.testA {
  @include outer-container;
}

.testB {
  @include span-columns(6);
  @include shift(6 of 12);
}

.testC {
  @include span-columns(6);
  @include shift(-12 of 12);
}

所以第一列向右移动了 6 行，这对我来说很有意义。然后第二列现在需要向左移动 12 （从它的起始位置开始移动 6，现在它被第一列移动了 6）。

我找不到任何有关执行此操作的官方文档。有人可以确认这是正确的而不是黑客行为吗？

【问题讨论】：

标签： bourbon neat

【解决方案1】：

在@include direction-context(right-to-left) {} 中包装块并移除移位

@include direction-context(right-to-left) {
 .testB {  @include span-columns(6); }
 .testC {  @include span-columns(6); }
}

如果它不起作用，请开始使用 span 列 - 添加 .testC 5 而不是 6 列。

【讨论】：