Директива order column в следующем коде работает, когда я изменяю размер окна браузера до ширины мобильного телефона. Однако, когда я запускаю его в мобильном эмуляторе или на реальном мобильном устройстве , столбцы заказов не работают. Это связано с тем, что запросы @media не работают на мобильных устройствах. Другие решения на форуме рекомендуют использовать <meta name="viewport" content="width=device-width,initial-scale=1.0">
Однако этот метатег здесь не помогает.
<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