我可以用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垂直叠放在{ {1}}。

如果屏幕尺寸较大，您希望sticky没有设置sticky，float，width或任何其他结构。你希望它能够完全崩溃。然后，您margin，a和b彼此相邻 - 使用c上的last来设置正确的顺序。

还有其他方法可以通过不同的源订单来解决这个问题，但希望这会给你一个良好的开端。