In order to achieve a checkerboard style layout for a webpage using HTML, I am looking for a solution where the image is positioned to the left in the first row and to the right in the second row. I want to explore if this can be accomplished purely with CSS + Bootstrap 4 without altering the HTML structure.
Initially, I tried using the classes "left-img" and "right-img" but they did not work as expected. Now, I have implemented the following CSS to target every even and odd element.
.checker:nth-child(even) .img-wrapper {
float:right;
}
.checker:nth-child(odd) .img-wrapper {
float:left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row checker">
<div class="col-lg-6">
<div class="">
<h2>The Title</h2>
<div class="">
some text
</div>
</div>
</div>
<div class="col-lg-6 img-wrapper">
<img src="https://via.placeholder.com/140x100" alt="">
</div>
</div>
<div class="row checker">
<div class="col-lg-6">
<div class="">
<h2>The Title</h2>
<div class="">
some text
</div>
</div>
</div>
<div class="col-lg-6 img-wrapper">
<img src="https://via.placeholder.com/140x100" alt="">
</div>
</div>
Full example
Find the complete example on my CodePen: https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100