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>

Если я поместил все столбцы в один ряд, это создаст большое белое пространство высоты места 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/