Bootstrap 4 - Move Row Up Next

Question

I've been looking at the Bootstrap docs but I can't seem to find the class that I need to make a certain effect happen. Is there a way to move/offset a div Row if the parent row has a column that pushes the bottom div down? Is this possible to achieve with bootstrap? I've attached an image of what I'm trying to accomplish along with the code.

<div class="container">
<div class="row">
    <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
    <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
</div>
<div class="row">
    <div class="col-sm-5" style="color: white; background:blue; height: 300px; position: top">something</div>
</div>

Answer 1

The Bootstrap 4 .row is flexbox, so all of the col-* will be the height of the tallest column. Therefore, you need to float- the cols on sm and up...

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

<div class="container">
    <div class="row d-sm-block">
        <div class="col-sm-5 float-left" style="color: white; background:black; height: 100px">something</div>
        <div class="col-sm-7 float-right" style="color: white; background:red; height: 300px">something</div>
        <div class="col-sm-5 float-left" style="color: white; background:blue; height: 300px; position: top">something</div>
    </div>
</div>

• d-sm-block makes the row display:block instead of display:flex on sm and up
• float-left and float-right to pull the taller column to the right.

Related: Empty vertical space between columns in Bootstrap 4

Answer 2

You could sort the two in to one sm-5 col like so:

<div class="container">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 300px">something</div>
  </div>
</div>

If you want it to detect this automatically and fill any vertical gaps available then no there is no way to do that. You need to structure your cols according to your content.

If you wanted the col which is shorter to fill the vertical gap using this method then you would need to look at using flex.

https://getbootstrap.com/docs/4.1/utilities/flex/

<div class="container d-flex">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 100%">something</div>
  </div>
</div>

Answer 3

Not elegant, but if you want to use CSS only, you can add a negative margin-top at the sm breakpoint. This will allow for single full-width stacking for the xs.

Codepen

<div class="container">
    <div class="row">
        <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
        <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
    </div>
    <div class="row">
        <div class="col-sm-5 push-up" style="color: white; background:blue; height: 300px;">something</div>
    </div>
</div>

CSS

@media (min-width: 576px) {
    .col-sm-5.push-up {
        margin-top: -200px;
    }
}

Answer 4

If you're using bootstrap 4, the solution you're looking for is probably the Cards component. https://getbootstrap.com/docs/4.0/components/card/#card-columns.

** I'd just throw this in a comment but I don't have enough rep yet.