How Does Bootstrap 4 Handle Column Ordering Across Different Screen Sizes?

Column Ordering in Bootstrap4

For flexible arrangements of columns across different screen sizes, Bootstrap offers a range of options.

Responsive Ordering in Bootstrap 4.0:

Bootstrap 4 eliminates the use of "xs-" prefixes for its responsive ordering classes. Instead, "push-" and "pull-" modifiers specify the viewport and the number of units to shift the column. For example, to achieve the desired 1-3-2 order on mobile:

<div>
<p><strong>Responsive Ordering in Bootstrap 4.1 and Above</strong>:</p>
<p>Bootstrap 4.1 introduces flexbox, simplifying column ordering. Order classes range from "order-1" to "order-12." Columns can be ordered responsively, such as "order-md-12 order-2" (last on MD, 2nd on XS):</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>Alternative Ordering Methods</strong>:</p>
<p>In addition to responsive ordering classes, flexbox direction utilities offer another approach:</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>Additional Notes</strong>:</p>
<ul>
<li>Column ordering is relative to its parent .row.</li>
<li>Responsive classes allow granular control over order, enabling complex arrangements across multiple screen sizes.</li>
<li>Bootstrap 4.1 and above no longer support the push/pull classes used in pre-4.0 versions.</li>
</ul>
</div>