When I resize the browser window to mobile width, the order column directive in the code snippet above works fine. However, when I test it on a mobile emulator or an actual mobile device, the order columns do not function properly. This issue seems to be related to @media queries not working properly on mobile devices. Other suggestions on the forum include using
<meta name="viewport" content="width=device-width,initial-scale=1.0">Unfortunately, adding that meta tag does not seem to resolve the problem.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-center py-8 py-md-11">
<div class="col-12 col-md-12 col-lg-5 mt-2">
<div class="d-flex">
<div>
<h3>
Feature 1
</h3>
<p>
sometext
</p>
</div>
</div>
<div class="d-flex">
<div>
<h3>
Feature 2
</h3>
<p>
sometext
</p>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-7 order-sm-first order-md-first order-lg-last">
<div class="mb-8 mb-md-0">
<div id="native-awesome-landing-page-tools" class="img-fluid img-animation lottie shadow-dark">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Eglinton_Valley_NZ_01.jpg" />
</div>
</div>
</div>
</div>
<div class="row align-items-center py-8 py-md-11">
<div class="col-12 col-md-12 col-lg-7">
<div class="mb-8 mb-md-0">
<img class="img-fluid" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg" />
</div>
</div>
<div class="col-12 col-md-12 col-lg-5 mt-2">
<div class="d-flex">
<div>
<h3>
Feature 1
</h3>
<p>
sometext
</p>
</div>
</div>
<div class="d-flex">
<div>
<h3>
Feature 2
</h3>
<p>
sometext
</p>
</div>
</div>
</div>
</div>Feature 1
sometext
Feature 2
sometext