我可以用 Susy 堆叠列吗？

Question

爱苏西，到目前为止！现在我想要这个初始布局...

...在较小的屏幕上变成这种布局：

这可以使用 Susy 吗？此外，我希望 AC 列在它们位于同一列时作为单个实体运行，因为我想给它们粘性行为。

Answer 1

你不需要清除任何东西，你只需要以不同的方式分隔它们。我整理了一个简单的Sassmeister demo。我的设置是移动优先的，具有任意总列和断点，但您可以随意更改。

我将a 和c 包装在一个容器中，因此您可以将它们视为一个单元：

<div class="sticky">
  <div class="item a">A</div>
  <div class="item c">C</div>
</div>
<div class="item b">B</div>

在小屏幕尺寸下，将sticky 布局到一侧，将b 布局到另一侧，然后让a 和c 在sticky 内垂直堆叠。

在较大的屏幕尺寸下，您希望 sticky 没有设置 float、width、margin 或任何其他赋予它结构的东西。你想让它崩溃。然后你将a、b 和c 并排排列——在c 上使用last 来设置正确的顺序。

还有其他方法可以使用不同的源订单来实现这一目标，但希望这会给您一个良好的开端。