引导4阶嵌套列

Question

我有一个问题，那就是订单-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>

如果我把所有的都放在一排，它就创造了第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/