Hey there, I hope everything is going well.
I'm facing a little issue here. I'm trying to design a page layout that looks like this:
Image - Description
Description - Image
Image - Description
and so on...
However, when viewed on a smaller device, it should change to:
Image
Description
Image
Description
and so on...
Unfortunately, what I currently have is:
Image
Description
Description
Image
Image
Description
How can I achieve the desired layout?
Below is my code snippet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c5dfc7dfc1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89c869e8698">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="container-fluid padding">
<div class="container padding">
<div class="row padding">
<div class="col-md-6 mt-5 mb-5">
<img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
</div>
<div class="col-md-6 align-self-center mt-5 mb-5">
<h3>Text Heading</h3>
<p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
</div>
<div class="col-md-6 align-self-center mt-5 mb-5">
<h3>Text Heading</h3>
<p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
</div>
<div class="col-md-6 mt-5 mb-5">
<img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
</div>
<div class="col-md-6 mt-5 mb-5">
<img class="img-fluid rounded border" width="300" height="200" src="" alt="" />
</div>
<div class="col-md-6 align-self-center mt-5 mb-5">
<h3>Text Heading</h3>
<p class="lead">Lorem Ipsum Dolor Sit Amet Just A Regular Text</p>
</div>
</div>
</div>
</div>
Thank you for your help!