css - Bootstrap with different order on mobile version

Question

I have 2 column and nested row in right column, how can i make bootstrap responsive like below,

layout :

desktop version
--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

mobile version (stacked in order)
--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

this is my 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 class="col-lg-8 order-lg-first">2
   </div>
</div>

With this code the order in mobile version 1 3 2, what I want is 1 2 3.

Answer 1

Because Bootstrap 4 uses flexbox, the columns are always going to be equal height, and you'll not be able to get the desktop (lg) layout that you want.

One option is to disable the flexbox for lg. Use floats so that the 1,3 columns naturally pull to the right, since 2 is taller. The flexbox order- will work on mobile.

https://www.codeply.com/go/8lsFAU3C5E

<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>

How this works

• Keep columns in the same row, since ordering is relative to parent
• The d-flex d-lg-block disables flex on lg and up
• The float-left float the columns when flex is disabled
• The order-* reorder the columns when flex is enabled

Another option is some flexbox wrapping hack that uses w-auto...

https://www.codeply.com/go/mKykCsBFDX

---

Also see:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

B-A-C -> A-B-C