3

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Dwiyi
  • 638
  • 7
  • 17

3 Answers3

7

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • This doesn't work if column 1 is higher than column 2. IN that case 3 will sit under 2, to the left of 1. Any suggestions on how to fix this? – Razzildinho Jul 03 '18 at 13:38
  • Just to answer my own question, add `float-right` rather than left to 3 to keep it on the right if 2 is shorter than 1. – Razzildinho Jul 03 '18 at 16:45
4

To achieve that in Bootstrap 4, you need the order-lg-first class for the "2" column and the offset-lg-8 class for the "3" column (assuming they are ordered 1-2-3 in the HTML).

The offset-lg-8 class will offset (i.e. push to the right) the third column by 8 units (=the same as the width of the second column) on screens that are large (lg) or larger thus producing the desired result.

Here's a working code snippet (click "run code snippet" below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-4 bg-warning">1</div>
        <div class="col-lg-8 order-lg-first bg-secondary">2</div>
        <div class="col-lg-4 offset-lg-8 bg-warning">3</div>
    </div>
</div>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
  • thanks, but there is white space between "1" and "3" in desktop version if height of "2" more than "1". is there work around this ? (the "3" always under "1" in desktop version ). thanks – Dwiyi Feb 20 '18 at 10:40
  • Are you saying that the height of "2" on desktop must be independent of the other divs? – WebDevBooster Feb 20 '18 at 10:42
  • @WebDevBooster I did the same solution that you explained, but like the OP said, now there is a height (space) between 1 and 3 (only on lg and above, works perfect in smaller screen sizes). Is there any solution for this? – Arun T Jun 22 '23 at 05:54
0

You can use push and pull to change the order of the columns. See more info here

<div class="row">
    <div class="col-md-4 col-md-push-4">
        <div class="alert alert-danger">B</div>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
        <div class="alert alert-info">A</div>
    </div>
    <div class="col-md-4 col-sm-6">
        <div class="alert alert-info">C</div>
    </div>
</div>
Naomi
  • 1,280
  • 6
  • 21
  • 40