html - Bootstrap 4顺序嵌套列

Question

我有一个问题，因为 order-[num] 不工作，因为左侧和右侧在不同的 col 中

View 截图

<section class="row justify-content-center">
    <div class="col-md-11">
        <div class="row">
            <div class="col-md-5">
                <div class="row">
                    <div class="col-12 mb-3 order-0">
                        order small 1
                    </div>
                    <div class="col-12 mb-3 order-2">
                        order small 3
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-12 mb-3 order-1">
                        Ordering as small 2
                    </div>
                    <div class="col-lg-6 mb-3 order-3">
                        ordering as small 4
                    </div>
                    <div class="col-lg-6 mb-3 order-4">
                        ordering as small 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

如果我将所有列放在一行中，它会创建一个高度为位置 2 的大空白

Answer 1

我只能想到一个解决方案，复制第 3 节，将其副本放在第 2 行和第 4 行和第 5 行之间，并根据断点显示/隐藏第 3 节及其副本。

HTML

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <section class="mb-3">
                1
            </section>
            <section class="mb-3 d-none d-md-block">
                3
            </section>
        </div>
        <div class="col-md-7">
            <section class="mb-3">
                2
            </section>
            <section class="mb-3 d-md-none">
                copy of 3
            </section>
            <div class="row">
                <div class="col">
                    <section class="mb-3">
                        4
                    </section>            
                </div>
                <div class="col">
                    <section class="mb-3">
                        5
                    </section>           
                </div>
            </div>
        </div>
    </div>  
</div>

结果

在大屏幕上:

在小屏幕上:

fiddle : http://jsfiddle.net/59x0s17k/1/