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

【问题标题】：Foundation framework - moving column source order between rows基础框架 - 在行之间移动列源顺序
【发布时间】：2017-01-20 13:06:01
【问题描述】：

我有一个基金会特定的问题，希望你能提供帮助。我在第二行上方有两列的第一行。我希望第一行的第二（右手）列位于移动格式的第二行下方。我研究了推/拉等，但在行之间切换列时遇到困难。有什么想法可以实现吗？

谢谢， MK

【问题讨论】：

标签： zurb-foundation multiple-columns rows

【解决方案1】：

这在您通过 Foundation 的 Push / Pull 描述的方式中无法直接实现，因为它是重新排序 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.

【讨论】：