如何毫无问题地更改 Foundation 上三列的顺序

Question

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

我在移动断点上有这样的布局：
[第1列]
[第2列]
[第3列]

在桌面上看起来像这样：
[ 第 2 列 ][ 第 1 列 ]
[ 第 2 列 ][ 第 1 列 ]
[ 第 2 列 ][ 第 3 列 ]
- - - - - - - ->[ 第 3 列 ]
桌面布局图像示例

该页面并不总是在第 2 列上有大量内容，有时它会中断：
桌面布局有问题

由于我还不能使用 Flex Box，起初我尝试使用源排序（拉和推），但它不适用于堆叠列（如本例中的第 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>

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

Answer 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>