jquery - 使用响应式 Zurb Foundation 移动列

Question

当尺寸较小时移动列的最佳方式是什么？

例子如下:

 <div class="row">
    <div class="two columns">...</div>
    <div class="seven columns">...</div>
    <div class="three columns">...</div>
</div>

我希望当屏幕尺寸较小时，两列移动到七列下方。我想出的唯一方法是做类似的事情:

 <div class="row">
    <div class="two columns hide-for-small">...</div>
    <div class="seven columns">...</div>
    <div class="two columns show-for-small">...</div>
    <div class="three columns">...</div>
</div>

但它看起来有点乱，可能会令人困惑。有没有更好的办法？

Answer 1

Foundation 有几个类可以让您玩弄列顺序。查看 Foundation Documentation 中的源代码排序部分.

例如:

<div class="row">
    <div class="seven columns push-two">...</div>
    <div class="two columns pull-seven">...</div>
    <div class="three columns">...</div>
</div>

在较大的屏幕上，列将显示为 2-7-3，但在较小的屏幕上，它将恢复为 7-2-3。

它仍然有点困惑和困惑，但总比为不同的显示创建单独的、重复的列要好。