Переместить верхние и нижние деления вправо от среднего деления

Question

Я использую Bootstrap 4.1.3 в моем проекте. Мне нужно создать страницу, где есть три DIV, расположенные друг над другом, когда ширина экрана меньше lg, например:

+---------------+
|     DIV 1     |
+---------------+

+---------------+
|               |
|               |
|               |
|     DIV 2     |
|               |
|               |
|               |
+---------------+

+---------------+
|     DIV 3     |
+---------------+

В точке останова lg мне нужно расположить DIV 1 и 2 справа от DIV 2 примерно так:

+---------------+   +---------------+
|               |   |     DIV 1     |
|               |   +---------------+
|               |
|     DIV 2     |   +---------------+
|               |   |     DIV 3     |
|               |   +---------------+
|               |
+---------------+

Я могу смоделировать это поведение, реплицируя DIV 1 и переключаясь между тем, какой из них отображается, а какой скрыт в точке останова lg:

<div id="pageBody" class="container-fluid">
    <div class="row">
        <div id="div1" class="col-12 d-lg-none">
            ... div 1 content ...
        </div>

        <div class="col-12 col-lg-9">
            <div id="div1" class="card tile tile-shadow">
                <div class="card-body card-body-eca">
                    ... div 2 content ...
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3">
            <div id="div1dup" class="d-none d-lg-block">
                ... div 1 content ...
            </div>

            <div id="div3">
                ... div 3 content ...
            </div>
        </div>
    </div>
</div>

Есть ли способ сделать это без репликации DIV 1?