Home >Web Front-end >CSS Tutorial >How Does Bootstrap 4 Handle Column Ordering Across Different Screen Sizes?
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>
The above is the detailed content of How Does Bootstrap 4 Handle Column Ordering Across Different Screen Sizes?. For more information, please follow other related articles on the PHP Chinese website!