I am struggling with arranging elements in HTML and CSS. As a beginner, I am faced with the challenge of ordering desktop and mobile layouts differently. The current code I am using looks like this:
<div class="row ">
<div class="col-lg-6">
<img src="img/services/service1.jpg" alt=">
</div>
<div class="col-lg-6">
<h2> Service 1</h2>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
<div class="row ">
<div class="col-lg-6">
<img src="img/services/service2.jpg" alt="">
</div>
<div class="col-lg-6">
<h2> Service 2</h2>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
</div>
</div>
<div class="row ">
<div class="col-lg-6">
<img src="img/services/service3.jpg" alt="">
</div>
<div class="col-lg-6">
<h2> Service 3</h2>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
</div>
</div>
This code currently arranges the elements in the following order:
1,2
3,4
5,6
however, I would like it to be:
1,2
4,3
5,6
I would appreciate any help or advice on how to achieve this arrangement. Thank you :)
EDIT: It's essential that the order remains 1,2,3,4,5,6 on mobile phones, which is why I am not swapping 3 and 4 for all devices.