Home >Web Front-end >CSS Tutorial >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:
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!