Can Push/Pull Classes Be Used for Equal-Width Bootstrap Columns?

Reordering Bootstrap Columns with Push/Pull for Equal-Width Elements

When working with Bootstrap's grid system, adjusting the order of columns is crucial for responsive layouts. However, it can be challenging to reorder columns of equal size using push/pull directives.

Can Push/Pull Be Used for .col-*-12 Elements?

No, it is not possible to change the order of columns with classes like ".col-xs-12.col-xs-push-12" and ".col-xs-12.col-xs-pull-12" because the combined width exceeds Bootstrap's 12-column grid definition.

Alternative Solutions:

1. Rearranging in HTML and Using Ordering Classes for Larger Screens

Rearrange the column order in the HTML and apply push/pull classes to achieve the desired ordering on larger screens:

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

2. CSS Transformation for Vertical Column Reordering

Utilize CSS transformations to reverse the order of columns displayed vertically below each other:

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr;
  }
}</code>

Note: CSS transformations are supported in IE9 with vendor prefixes.

The above is the detailed content of Can Push/Pull Classes Be Used for Equal-Width Bootstrap Columns?. For more information, please follow other related articles on the PHP Chinese website!