Bootstrap 4 的特殊重新排序

Question

我正在尝试找出一种在移动设备 md 上使用 col- class 重新订购商品的方法来实现此目的：

桌面：

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

手机：

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

有没有不使用 hidden-md- class 并复制内容的方法？

HTML 来自 ZimSystem：

<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

Edit - 基于新的 "height" 问题，flexbox 不适用于此。实现此目的的最佳方法是使用浮动实用程序。

Float grid demo

Answer 2

这应该可以（甚至是移动设备）。这里有一个link到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。

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

Bootstrap 4 的特殊重新排序

Special Reordering with Bootstrap 4

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4