The code should be entered just after the <head> tag.
Solution 1 :
Problem :
The order column directive in the following code works when I resize the browser window to mobile width. However, when I run it in mobile emulator or actual mobile device, the order columns are not working. This is due to @media queries not working on mobile. Other solutions on the forum is recommending use of
<meta name="viewport" content="width=device-width,initial-scale=1.0">
However, that meta tag is not helping here.
<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
Comments
Comment posted by Tzimpo
If this line is not present then none of your media query would work.