Exploring the latest updates in Bootstrap v4:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...The push and pull modifier classes have been replaced by the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
However, I've noticed that when I use the order function, it doesn't behave the same as the push-pull method. It ends up stacking the rows just like the first row in the code below.
My objective is to display an image on the left with text on the right in one row, followed by text on the left and an image on the right in the next row on a desktop screen. When viewed on a smaller screen, I want each image to be stacked on top of the corresponding text.
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>