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

Question

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

谢谢， MK

Answer 1

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

您可以将HTML重建为一行（但这有其他相关问题），然后使用推/拉

或者（更简单地）使用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。