Question

好的，我是Susy的新手，我正在尝试做一些可能非常容易的事情。在大型显示器上，我有两列并排| A | B |。当我将浏览器缩小到移动大小时，它将A列叠加在B上。

如何将B叠加在A上？我到处都看了，我似乎无法找到母亲的布局。我可以整天阅读文档，但是，我是一个视觉人。有没有我可以下载一些样本Susy网格的地方，只是搞乱了要学习的设置？

我意识到这是一个非常新手的帖子，但是，我必须从某个地方开始。

谢谢！

Answer 1

最简单的选项是在HTML中更改元素的来源顺序：

<div class="b">column B</div>
<div class="a">column A</div>

如果b在标记中排在第一位，它将自动堆叠在浏览器的顶部。您仍然可以使用Susy以任意顺序水平排列它们：

.a {
  @include span(8 of 12);
}

.b {
  @include span(last 4 of 12);
}

我不知道你的布局，所以我只是在那里编号。 last关键字会将b推向右侧，因此a可以填写左侧。

您的其他选项涉及CSS flexbox：

Flexbox允许您以任何顺序（垂直或水平）堆叠元素。如果你想走这个方向，你应该读一下这样的CSS Tricks tutorial。 Susy和flexbox可以很好地协同工作，但你必须使用susy函数而不是mixin。您可以在flexbox期望宽度的任何位置应用Susy函数，例如：

.b {
  flex-basis: span(4 of 12);
}