如何强制 Foundation 在全宽之前先进入 2 列？

Question

我正在为我们的网站使用 Foundation，并且有一个部分每行有 3 个框/列。如：

代码：

<div class="row">
    <div class="large-4 columns">[BOX]</div>
    <div class="large-4 columns">[BOX]</div>
    <div class="large-4 columns">[BOX]</div>
</div>

现在当浏览器调整到大约 1023px 时，每列突然变为全宽，如下所示：

..即使右边还有一些 space 先去 2 列。

如何才能让 Foundation 在进入全角之前先以特定的媒体查询大小进入 2 列？

Answer 1

对于可能觉得这有帮助的人：

<div class="row small-up-1 medium-up-2 large-up-3">
    <div class="columns">
    </div>
</div>

Large-up-3 表示在大屏幕上，列为 3，

Medium-up-2 表示在中等屏幕上，列为 2，

Small-up-1 表示在小屏幕上，该列只有 1。

您可以根据要显示的列数更改数字。

（Foundation 5 有此更新。）

如何强制 Foundation 在全宽之前先进入 2 列？

How to force Foundation to go 2 columns first before going full width?

grid

responsive-design

zurb-foundation

responsive