布局顺序与Susy的标记顺序不同

Question

是否可以使用Susy创建一个订单与订单中的订单不同的布局？

我的标记类似于：

<div id="container">
  <div id="content"></div>
  <div id="sidebar1"></div>
  <div id="sidebar2"></div>
</div>

此标记最适合移动设备以线性方式呈现（内容，侧边栏，侧边栏）。

桌面然而，我想提供侧边栏，内容，侧边栏。

我的$ susy地图是：

$susy: (
  container: 1200px,
  columns: 12,
  global-box-sizing: border-box
);

我已经尝试了

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 first);
}
#sidebar2{
  @include span(2 last);
}

和

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 at 1 of 12);
}
#sidebar2{
  @include span(2 at 10 of 12);
}

Answer 1

除非您使用浮动隔离（使用isolate关键字），否则传入某个位置（first，last，at 10等）只会影响排水沟并且最后 - 流。通过隔离，您可以得到您想要的。试试这个：

#content{
  @include span(7 at 4 of 12 isolate);
}
#sidebar1{
  @include span(3 first isolate);
}
#sidebar2{
  @include span(2 last isolate);
}

你可以read more about isolation in the docs。