CODEWITHSUNDEEP
flexboxbootstrap-4
FoFoCuddlyPoops
FoFoCuddlyPoops

Reputation: 147

Bootstrap 4 - Stack 2 columns with 1 large column on the right

I'm trying to use bootstrap 4 and perhaps flexbox to achieve the following:

Small screen:

|                 |            |
|        1        |      2     |
|                 |            |
|______________________________|
|                              |
|                              |
|               3              |
|                              |

Large screen:

|                 |            |
|        1        |            |
|                 |            |
|_________________|      2     |
|                 |            |
|                 |            |
|        3        |            |
|                 |            |

What I have so far: https://jsfiddle.net/aq9Laaew/180926/
I've tried to play around with order-* and align-self-stretch but they don't give the desired result. (I'm looking for something like rowspan)

Extra details that might be important:
The height of column 2 is 68px on small screens and 140px on larger screens (breakpoint for larger is 992px and up)

Upvotes: 2

Views: 2513

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

I've answered a similar questions here:
How to fix unexpected column order in bootstrap 4?
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

You need to override the flexbox on the row to get the taller column to float right. This can be done using d-md-block on the row, and the float-* on the columns.

<div class="container">
  <div class="row d-md-block">
    <div class="col-9 border float-left">
      1 of 3
    </div>
    <div class="col-3 border taller float-right">
      2 of 3
    </div>
    <div class="col-12 col-md-9 border">
      3 of 3
    </div>
  </div>
</div>

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

Upvotes: 1

Related Questions