I have a page with a pattern of Bootstrap grid rows that each contain a paragraph of text & an image. The design intent is that on large screens, for even rows the text occupies columns 3 to 8 of the Bootstrap grid, & the image occupies columns 9 to 11, for odd rows the image occupies columns 2 to 4, & the text occupies columns 5 to 10. On small screens each image should be below the corresponding paragraph. I have that 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>
However the Bootstrap docs tell me I should be able to achieve it using offset classes instead of the empty columns. I’ve tried numerous permutations, & the best I’ve achieved is that odd or even rows are right, but not both. Can anyone set me right?
I have found a solution, & it is to discard justify-content-center in the <div class="row">. While that is essential to the positioning when I was using the empty column, it conflicts with the use of column offset classes. With that gone, the offsets work perfectly.