Необходимо сверстать небольшое превью из 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>