Alternating Mobile-First Layout in Bootstrap 4

By using the order- prefix you can start with a stacked, mobile-first layout.. then at a larger screen size essentially push and pull the blocks of content using the order prefix.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 3 allowed you to use push and pull prefixes, those classes are gone in the latest version of bootstrap. Now, you’ll need to use the .order- prefix to alternate the layout of our page content.

Here’s an example of how it works.

 <div class="container">
  <section class="row">
    	<div class="col-xs-12 col-md-6 order-md-2"><p>1st on small; right on larger screens</p></div>
    	<div class="col-xs-12 col-md-6 order-md-1"><p>bottom on small; left on large</p></div>
 </section>
</div>

 

Chris DrinkutTags: , ,