Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shifting accordingly. For even rows, the text takes up columns 3 to 8, while the image occupies columns 9 to 11. Conversely, for odd rows, the image spans columns 2 to 4, and the text fills columns 5 to 10. On smaller screens, the image should appear below the text. I initially achieved this layout using...
<div class="container my-4">
<div class="row align-items-center justify-content-center">
<div class="col-lg-1 order-3 order-lg-1"> </div>
<div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
<div class="col-lg-3 order-2 order-lg-3"><img src='...'></div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-3 order-2 order-lg-1"><img src='...'></div>
<div class="col-lg-6 order-1 order-lg-2"><p>Paragraph text.</p></div>
<div class="col-lg-1 order-3 order-lg-3"> </div>
</div>
...
</div>
Despite following the Bootstrap documentation, I have struggled to implement this layout using offset classes instead of empty columns. I have experimented with various combinations, but have only managed to get either odd or even rows correct, not both. Can someone provide insight on this issue?