1

Attached you can see an image of what I'm trying to do. Is it possible using just flexbox and bootstrap4?

layout

Edit: what I've tried: https://codepen.io/anon/pen/MRwaJL

 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
    </div>
 </div>
.left-div {
  background-color: aquamarine;
  min-height: 50px;
  margin-bottom: 20px;
}

.right-div {
  background-color: darkgray;
  min-height: 100px;
}
Georgi Hristozov
  • 3,899
  • 2
  • 17
  • 23
heraphim
  • 326
  • 2
  • 10

1 Answers1

1

Bootstrap 4 uses flexbox, so columns in each row are the same height. The desktop layout could be achieved using nesting with 2 outer columns. However, to change the order/position of the columns, as you want for mobile, the columns must all be in the same .row...

Therefore, you can "disable" the flexbox on md and larger using the d-block class along with the float utility classes. On smaller mobile widths, the flexbox behavior will kick back in, and the order-* classes can be used to position the columns.

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-8 order-1 float-left">1</div>
        <div class="col-md-4 order-3 float-right">3</div>
        <div class="col-md-8 order-2 float-left">2</div>
        <div class="col-md-4 order-5 float-right">5</div>
        <div class="col-md-8 order-4 float-left">4</div>
    </div>
</div>

https://www.codeply.com/go/5z7096wfGO

Related: Rearranging responsive Bootstrap 4 grid layout

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks! That's a step forward, but I need other rows after it as well... Adding another 'row' doesn't work because the first row doesn't take all the height of it's children. – heraphim Apr 02 '19 at 08:17
  • The question didn't mention more rows or columns. It just shows the 5 for which you now have an answer ;-) .. this is the way using only Bootstrap 4 – Carol Skelly Apr 02 '19 at 08:19
  • Adding .clearfix to the first row solves it. Thanks! – heraphim Apr 02 '19 at 08:21
  • A declaration of `.container {display: grid;}` would work well here. – Mister Moody Apr 03 '19 at 03:06