Bootstrap верстка превью с изображениями

Необходимо сверстать небольшое превью из 6 картинок на bootstrap 4, так чтобы по высоте первая и последняя картинка занимала два блока, а по центру картинки занимали 1 блок

На мобильных устройствах должно выглядеть так:

Под десктопы удалось сверстать, но под мобилки не выходит сделать центральную часть.(т.к сделано скорее всего неправильно, костыльно)

Вот так это выглядит Вот что происходит с мобилками

HTML(упрощенный):

<div class="container">
<div class="row">
    <div class="col-lg-3 col-sm-12">
        <img src="1.png" class="rounded img-tall"/>
    </div>

    <div class="col-lg-3 col-sm-12 order-last">
        <img src="1.png" class="rounded img-tall"/>
    </div>

    <div class="col-lg-6 col-sm-12">
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <img src="1.png" class="rounded"/>
            </div>

            <div class="col-lg-6 col-sm-6">
                    <img src="1.png" class="rounded"/>
                </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <img src="1.png" class="rounded"/>
            </div>

            <div class="col-lg-6 col-sm-6 ">
                <img src="1.png" class="rounded"/>
            </div>
        </div>
    </div>
</div>