html - Susy 列 - 堆叠移动

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 函数而不是 mixins。您可以在 flexbox 需要宽度的任何地方应用 Susy 函数，例如:

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