I'm struggling to achieve the desired layout using Bootstrap 4 grid. In the desktop view, images are in positions 2, 3, and 6, while the rest are text.
https://i.sstatic.net/guhWy.jpg
This is how the site should look on mobile.
https://i.sstatic.net/RqcTC.jpg
Here is the HTML code:
<section class="col-12">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6">
<img src=""/>
</div>
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
</div>
</section>
Check out the project here: . To adjust the spacing for elements 4, 5, and 6 in the CSS, I used:
position: relative;
top: -25%;
Although this gave me the desired result, it resulted in a large gap at the bottom. Any suggestions on how to modify my Bootstrap classes to achieve the desired layout? I'm new to this.
EDIT: After trying various solutions, I discovered that using CSS grid provided more flexibility in this scenario, as the HTML element positioning was fixed and Bootstrap 4 doesn't support such mixing.