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

Question

爱 Susy，到目前为止!现在我想要这个初始布局...

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

这可以使用 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 设置正确的顺序。

还有其他方法可以通过不同的源代码顺序实现这一目标，但希望这能给您一个良好的开端。