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

Question

我试图找出一种方法，使用md类对移动col-上的项目进行重新排序，以实现此目的：

桌面：

[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实用程序。

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。

我希望我能回答你任何进一步的问题并帮助所有遇到问题的人。 ：）