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>

Responsive Ordering in Bootstrap 4.1 and Above:

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):

<div>

Alternative Ordering Methods:

In addition to responsive ordering classes, flexbox direction utilities offer another approach:

<div>

Additional Notes:

• Column ordering is relative to its parent .row.
• Responsive classes allow granular control over order, enabling complex arrangements across multiple screen sizes.
• Bootstrap 4.1 and above no longer support the push/pull classes used in pre-4.0 versions.

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!