Can You Reorder Bootstrap Columns with .col-*-12 Using Push and Pull?

Reorganizing Bootstrap Columns with .col-*-12 Using Push and Pull

In the realm of Bootstrap grid layouts, you might encounter instances where you need to change the order of columns with the .col-xs-12 class on smaller screens (mobile devices). It's important to understand that the traditional push and pull directives may not offer a direct solution in this scenario.

Can You Reorder Columns with .col-*-12 Using Push/Pull?

No, you cannot reorder .col--12 columns using the .col--push-12 and .col-*-pull-12 classes. This is because the combined width of these columns exceeds the defined 12-column grid.

Alternative Approaches for Reordering .col-*-12 Columns:

• Rearrange Columns in HTML: You can alter the order of columns in your HTML markup and use the ordering classes on larger screen sizes. 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>

• Reverse Vertical Column Order with CSS Transformations: This method involves using CSS transformations to rotate the column order on smaller screens.

<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 and above, but remember to include vendor prefixes for cross-browser compatibility.

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