css - 我可以用 Susy 堆叠列吗？

Question

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

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

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

Answer 1

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

我将它们包装在一个容器中，因此您可以将它们视为一个单元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有 set float、width、margin或任何其他赋予它结构的东西。你想让它崩溃。然后你将a,b和并排排列c——使用lastonc设置正确的顺序。

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