css - 3 列到 2 列堆叠布局，带 Susy（EG twitter）

Question

我已经与 Susy 合作了一段时间，遇到了一个我似乎无法弄清楚的用例。解释它的最好方法是以 Twitter 为例。

如果您查看他们的网站，您会看到他们使用三列标准布局，在 1250 处有一个断点。到达该点之后，整个最右边的第 3 列都位于第 1 列下方。

Susy 2 中的纯 CSS 是如何做到的？当我查看 twitter 时，他们似乎将内容从第 3 列物理移动到第 1 列。我假设这一切都是用 JS 完成的，但 id 宁愿做得更干净一些。想法？

Answer 1

看起来就像使用断点作为我的列的另一个 mixin 一样简单。我只是添加了

@import "breakpoint";

@include breakpoint (new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}