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

我正试图找到一种方法，通过

col-

类在移动

md

上重新排序项目，以实现以下目标：

桌面：

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

流动电话：

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

有没有一种方法可以在不使用

隐藏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>

1.
2.
3.
长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块长块
5.
6.
7.

有没有办法使块6的内容正好位于块3的下方（见图）

---

像这样使用嵌套

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

1.
2.
3.
4.
5.
6.
7.

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

这应该可以（即使是移动的）。这里有一个链接

1.
2.
3.
4.
5.
6.
7.

---

如果您与客户有其他问题

• 迁移
• 所有的新课程
• 等等

在最新版本的Bootstrap（v4.0.0-alpha.6）中，您可以查看这一点

---

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

工作起来很有魅力！谢谢你刚刚更新了这个问题，事实上这是我想会发生的事，但不是我想的。你能看一下吗？你应该具体回答这个问题。@ZimSystem添加了代码。现在回答好了吗？我有个解决办法。当有大量文本时工作正常。我在回答中发布了一个JSFIDLE和所需的代码。

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