基础框架 - 在行之间移动列源顺序

Question

我有一个特定于基金会的查询，希望您能提供帮助。我在第二行上方有两列的第一行。我希望第一行的第二（右手）列落在移动格式的第二行下方。我调查了 push/pull 等，但我很难在行之间切换列。请问有什么实现方法吗？

谢谢， MK

Answer 1

这不是您通过 Foundation 的推/拉所描述的方式直接可能的，因为它是重新排序 columns only（不是行和列）。

您可以将 HTML 重构为只有一行（尽管这还有其他相关问题），然后使用 Push / Pull

或者（更简单地说）使用 Visibility classes 只显示一行小的，隐藏中等向上的行，反之亦然：

<div class="row">
    <div class="small-12 medium-6 columns">
        Top left
    </div>
    <div class="medium-6 columns show-for-medium">
        Top right
    </div>
</div>
<div class="row">
    <div class="small-12 large-6 columns">
        Bottom
    </div>
</div>
<div class="row">
    <div class="small-12 columns show-for-small-only">
        Bottom for small
    </div>
</div>

这个例子在jsfiddle.

基础框架 - 在行之间移动列源顺序

Foundation framework - moving column source order between rows

rows

multiple-columns

zurb-foundation