Can Push/Pull Classes Be Used to Rearrange .col-*-12 Columns in Bootstrap?

Changing Column Order with Bootstrap Push/Pull for .col-*-12 Columns

Issue:

You aim to rearrange two equal-sized columns (.col-xs-12) in Bootstrap on mobile devices, reversing their order, using push/pull directives. However, you question whether this approach is viable for columns of this size.

Resolution:

Push/Pull Limitations:

Push and pull directives are designed to alter column order for different screen sizes, but they have limitations. Rearranging columns that occupy the entire 12-column grid (.col-*-12) is not feasible with these helpers.

Alternative Approaches:

1. Rearrange HTML Order: You can manually rearrange the column order in HTML and apply push/pull classes on wider screens to maintain the desired layout.

2. CSS Transform Trick:

   • Implement a CSS transform on a row container to effectively reverse column order.
   • Ensure proper horizontal alignment by using direction modifiers in conjunction with transforms.
   • Note that transforms are supported in IE9 with vendor prefixes.

The above is the detailed content of Can Push/Pull Classes Be Used to Rearrange .col-*-12 Columns in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!