Bootstrap 4阶嵌套列

Question

我有一个问题，因为不同列的左侧和右侧，order- [num]不起作用

视图截图

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

如果我将所有col都放在一行中，则会在位置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>

结果

在大屏幕上：

在小屏幕上：

小提琴： http://jsfiddle.net/59x0s17k/1/