使用 Bootstrap 4 进行特殊重新排序

Question

我正在尝试找出一种方法，使用 col- 类在移动设备 md 上重新排序项目以实现此目的：

桌面：

[1]    [4]
[2]    [5]
[3]
[6]
[7]

手机：

[1]
[2]
[3]
[4]
[5]
[6]
[7]

有没有办法在不使用hidden-md- 类并复制内容的情况下获得它？

来自 ZimSystem 的 HTML：

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                 1
            </div>
            <div class="col-md-12 text-center">
                2
            </div>
            <div class="col-md-12 text-center">
                3
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block 
            </div>
            <div class="col-md-12 text-center">
                5
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                6
            </div>
            <div class="col-md-12 text-center">
                7
            </div>
        </div>
    </div>
</div>

有没有办法让第 6 块的内容刚好低于第 3 块（见图）

Answer 1

像这样使用嵌套..

<div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    1
                </div>
                <div class="col-md-12">
                    2
                </div>
                <div class="col-md-12">
                    3
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    4
                </div>
                <div class="col-md-12">
                    5
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    6
                </div>
                <div class="col-md-12">
                    7
                </div>
            </div>
        </div>
    </div>

Flexbox grid demo

编辑 - 基于新的“高度”问题，flexbox 不适用于此。实现这一点的最佳方法是使用浮动实用程序。

Float grid demo

Answer 2

这应该可以工作（即使是移动设备）。这里是jsFiddle的链接。

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                1
            </div>
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
    <div class="col-md-6 offset-md-6">
        <div class="row">
            <div class="col-md-12">
                4
            </div>
            <div class="col-md-12">
                5
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                6
            </div>
            <div class="col-md-12">
                7
            </div>
        </div>
    </div>
</div>

---

如果您有其他问题

• 迁移
• 所有新类
• 等

在最新版本的 Bootstrap (v4.0.0-alpha.6) 中，您可以查看此Bootstrap Site。

我希望我能回答您任何进一步的问题，并帮助所有其他遇到问题的人。 :)