Created by: jhechtf
Add in dynamic classes that change the order:... CSS property for flex columns. For example, using the following HTML:
<section class="container-fluid bg-helms-light">
<div class="row gradient">
<div class="col-xs-12 order-xs-2 order-md-1 col-md-8" style="">
<div class="display-3 text-xs-center mb-2">Lorem ipsum dolor sit amet.</div>
<div class="h3 text-xs-center">Lorem ipsum dolor.</div>
<p class="lead">Lorem ipsum. <em><u>Lorem ipsum.</u></em>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsum eum recusandae provident perspiciatis minima explicabo deleniti delectus tenetur aut, ullam libero eveniet nulla architecto ea, inventore sapiente, perferendis molestias.
</p>
</div>
<div class="col-xs-12 order-xs-1 order-md-2 col-md-4">
<img src="http://placehold.it/400?text=Students 1" alt="Placeholder" style="height:100%;width:100%;">
</div>
</div>
<div class="row bg-helms-dark gradient-white">
<div class="col-md-4 col-xs-12">
<img src="http://placehold.it/400?text=Students 2" style="height:100%;width:100%;" alt="Placeholder 2">
</div>
<div class="col-md-8 col-xs-12 p-0 pt-1">
<div class="display-1 text-xs-center">Lorem ipsum dolor sit.</div>
<p class="h3">Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel magnam repudiandae beatae, suscipit aliquid a aut quos ea quas quo sit eligendi, dolorem excepturi modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quod, laudantium laborum odio tempore praesentium placeat quaerat consectetur, molestiae quas eius rem voluptatum vel eum incidunt, error iure minus maxime.
</p>
</div>
</div>
<div class="row gradient">
<div class="col-xs-12">
<div class="display-3 text-xs-center">Lorem ipsum dolor sit amet, consectetur:
</div>
<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, atque.
</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta facere consequuntur, dolor repellat sunt facilis.</p>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h5>
<ol>
<li>Lorem ipsum.</li>
<li>Ea, autem.</li>
<li>Accusamus, labore.</li>
</ol>
</div>
</div>
</section>
Results in two fairly different views:
Desktop / Full View
Mobile / Small View
Without Order Classes
