How to Reorder .col-*-12 Columns in Bootstrap Using Push/Pull?

Reordering Columns with Push/Pull for .col-*-12 in Bootstrap

In Bootstrap, the push and pull directive classes can be employed to adjust the placement of columns relative to the surrounding columns. However, when it comes to columns with a width of 12 (i.e. .col-*-12), it's important to note that push/pull cannot directly change their order.

This is because the sum of the widths of the two columns exceeds the default 12-column grid width specified by Bootstrap. Instead, there are two approaches to reorder these columns:

1. Reverse HTML Column Order and Apply Order Classes on Larger Screens

In this approach, you can swap the order of the columns in your HTML markup and then use push/pull to change their order on larger screens. For example:

<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. Use CSS Transforms for Vertical Reordering

Alternatively, you can employ CSS transforms to reverse the order of the columns when they are stacked vertically on smaller screens:

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

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

Note that CSS transforms are supported in IE9 and higher, so you may need to include vendor prefixes for compatibility.

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