如何在没有问题的情况下更改 Foundation 上三列的顺序答案

【问题标题】：How to change order of three columns on Foundation with no issues如何在没有问题的情况下更改 Foundation 上三列的顺序
【发布时间】：2016-10-15 10:17:46
【问题描述】：

我正在使用 Foundation 6 Framework，但在将三列的顺序更改为在桌面上看起来像两列时遇到了一些问题。

我在移动断点上有这个布局：
[第1栏]
[第2栏]
[第 3 栏]

在桌面上看起来像这样：
[第2栏][第1栏]
[第2栏][第1栏]
[第2栏][第3栏]
- - - - - - ->[第 3 栏]
Desktop Layout Image example

第 2 列的页面内容并不总是很大，有时会中断：
Desktop Layout with The problem

由于我还不能使用 Flex Box，所以一开始我尝试使用 Source Ordering（拉和推），但它不适用于堆叠列（如本例中的第 2 列和第 3 列）。此解决方案是在第 1 列上使用 Foundation 的类 float-right 应用的（假设第 2 列由于是最后一列而已经具有 'float: right'）。

我的代码：

<div class="row">
  <div class="column small-12 large-4 float-right">column 1</div>
  <div class="column small-12 large-8">column 2</div>
  <div class="column small-12 large-4">column 3</div>
</div>

有人知道解决这个问题的好方法吗？谢谢。

【问题讨论】：

为什么不能使用弹性网格？它现在得到了广泛的支持。
很遗憾，我必须支持一些旧版浏览器。

标签： html css responsive-design zurb-foundation

【解决方案1】：

您为什么不尝试将其分解为另一组行和列？例如：

<div class="row">
    <div class="small-12 large-8 columns">
        <div class="row">
            <div class="large-12 columns">column 2
            </div>
        </div>
    </div>
    <div class="small-12 large-4 columns">
        <div class="row">
            <div class="large-12 columns">column 1
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">column 2
            </div>
        </div>
    </div>
</div>

【讨论】：

在小断点上，第 1 列的位置应该是垂直的。
啊，我明白了。好吧，如果内容不是太多，粗略的解决方案是加载第 1 列内容两次（一次在第 2 列之前，一次在之后），给他们 id 并使用 css @media 查询来显示下面第 2 列之前的内容小断点。一个更复杂的解决方案是给第 1 列一个 id，编写一些快速的 javascript 来分离第 1 列，然后在移动设备上将其重新附加到第 2 列上方。使用第二种解决方案，您可以在页面加载时检测浏览器的宽度并进行处理
是的，我考虑过这些解决方案。我们现在在页面上有一些性能问题。我不想使用会使这种情况变得更糟的解决方法。

【解决方案2】：

确保您阅读了文档中的 Source Ordering 部分： http://foundation.zurb.com/sites/docs/grid.html#source-ordering

您可以使用small-push-x、large-pull-x（替换数字中的x）来控制事物的顺序

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。”
你是对的，虽然这个问题应该在谷歌而不是在这里问，恕我直言

【解决方案3】：

通过使用正确的布局顺序和使用pull 和push 类。看看这个 3 列示例：

<div class="row">
    <div class="medium-6 medium-push-3 columns">
        Page content
    </div>
    <div class="medium-3 medium-push-3 columns">
        <h4>Course Details</h4>
        <table>
            <tbody>
                <tr>
                    <td>Course Fee:</td>
                    <td>&pound; 50</td>
                </tr>
                <tr>
                    <td>Course Duration:</td>
                    <td>1 Month</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="medium-3 medium-pull-9 columns">
        <div>
            <h4>Course Map</h4>
            List of courses         
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

用“order-1, order 2”找到这个

参考https://foundation.zurb.com/forum/posts/50758-source-ordering-issue

例子

我们的首要任务是您

EST 跳过跟踪器以正直、尊重和礼貌的态度行事我们的目标是提供超出预期的服务。我们会加倍努力以确保您对我们的结果感到满意。

【讨论】：

【解决方案5】：

自提出此问题以来，情况发生了变化。推/拉正在退出。现在在 Zurb Foundation 6+ 中，XY 网格和源排序是首选解决方案，而在 Zurb 7 中，旧的浮动网格将被弃用。见https://foundation.zurb.com/sites/docs/flexbox-utilities.html#source-ordering

flexbox "order" css 属性现在可以应用于单个项目。

或者像示例中那样更改类（例如“medium-order-1”）：

<div class="grid-x grid-padding-x">
  <div class="cell small-6 small-order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
  <div class="cell small-6 small-order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
</div>

[我意识到问题是在无法使用 flexbox 的情况下，但这是目前大多数受众的正确答案]

【讨论】：