How to Reorder Bootstrap Columns Differently for Desktop and Mobile Views?

Stacking Bootstrap Columns in Different Order on Mobile

In Bootstrap 4, the arrangement of columns can be a bit tricky to customize when switching between desktop and mobile views. Let's tackle a particular scenario: you have two columns and a nested row in the right column. Your goal is to make the layout responsive such that it displays as follows:

Desktop version:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

Mobile version (stacked in order):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Using Floats and Disabling Flexbox

The default flexbox layout in Bootstrap 4 ensures equal height for columns. To achieve the desired desktop layout, you can disable flexbox for large screens and use floats instead:

<div class="container">
    <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>
</div>

Using Flexbox Wrapping Hack

Alternatively, you can employ a flexbox wrapping hack that utilizes w-auto:

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

Considerations

Both approaches have their own advantages and disadvantages. The float method is more straightforward but can cause issues with alignment and responsiveness. The wrapping hack provides better responsiveness but requires more complex CSS.

Additional Resources

• [How to fix unexpected column order in bootstrap 4?](...)
• [Bootstrap Responsive Columns Height](...)
• B-A-C -> A-B-C

The above is the detailed content of How to Reorder Bootstrap Columns Differently for Desktop and Mobile Views?. For more information, please follow other related articles on the PHP Chinese website!