好的，我是 Susy 的新手，我正在尝试做一些可能非常简单的事情。在大型显示器上，我有两列并排|A|B|。当我将浏览器缩小到移动尺寸时，它会将 A 列堆叠在 B 上。
如何让 B 叠在 A 之上？我到处看了看，似乎找不到布局的母亲负载。我可以整天阅读文档，但是，我是一个视觉型的人。有没有一个地方可以让我下载一些示例 Susy 网格，以便弄乱要学习的设置？
我意识到这是一个非常新手的帖子，但是，我必须从某个地方开始。
谢谢！
【问题讨论】：
最简单的选择是更改 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 函数而不是 mixins。您可以在 flexbox 需要宽度的任何地方应用 Susy 函数，例如：
.b {
flex-basis: span(4 of 12);
}
【讨论】：