Сделать из двух колонок, две колонки и одну внизу сплошную при адаптиве

Вот пример как сейчас: enter image description here Вот как нужно: enter image description here

Есть такие блоки на bootstrap 4 , нужно сделать чтобы коричневый блок стал на уровень с синим, а желтый внизу на всю ширину выстроился внизу, при смене разрешения. Или как можно реализовать такое. Вот код текущей верски `

    <div class="row  d-flex flex-row ">
        <div class="col-xl-6 col-md-6 col-xs-6" style="background-color: blue;">Эта колонка выше чем все остальныне <br>
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
    </div>
    <div class="clearfix"></div>
        <div class="col-xl-6">
            <div class="row d-flex flex-xl-column">
                <div class="col-xl-12 col-lg-12 col-md-6 col-xs-6" style="background-color: brown;">Эта колонка выше чем все остальныне <br>
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                </div>
                <div class="clearfix"></div>
                <div class=" col-xl-12 col-lg-12 col-md-12 col-xs-12" style="background-color: yellow;">Эта колонка выше чем все остальныне <br>
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне</div>
            </div>
        </div>
    </div>
   </div>
    </div>
</div>`