This site is under construction.

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.

bootstrap documentation

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 class="col-xs-12 col-md-6 order-md-1"><p>bottom on small; left on large</p>
Boostrap Tags: , ,