How to Responsively Reorder Bootstrap Elements on Mobile?

Order Bootstrap Elements Responsively with Mobile Reordering

In Bootstrap, managing column order is crucial for responsive layouts. However, achieving the desired order on mobile can sometimes pose challenges.

Initial Code:

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

Problem:

This code results in the following order on mobile: 1, 3, 2 instead of the desired 1, 2, 3.

Solution 1: Disable Flexbox on Large Screens

Bootstrap uses flexbox, which enforces equal column heights. To rearrange columns on mobile, flexbox can be disabled for large screens (e.g., desktops).

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">
    <div class="card card-body tall">2</div>
  </div>
  <div class="col-lg-4 order-0 float-left">
    <div class="card card-body">1</div>
  </div>
  <div class="col-lg-4 order-1 float-left">
    <div class="card card-body">3</div>
  </div>
</div>

Solution 2: Flexbox Wrap Hack with Auto Width

Another option involves using a flexbox wrap hack with automatic column widths (w-auto).

Additional Resources:

• [Bootstrap Responsive Columns Height](https://www.w3resource.com/twitter-bootstrap/responsive-columns-height.php)
• [How to fix unexpected column order in bootstrap 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

The above is the detailed content of How to Responsively Reorder Bootstrap Elements on Mobile?. For more information, please follow other related articles on the PHP Chinese website!