rows getting pushed down by long column in bootstrap - html

Question

I'm trying to make a layout like this using bootstrap.
However, I keep getting this
Does anyone know how to prevent the second row from being pushed down by the large column?
Here is a skeleton of my HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 about">
<img >
</div>
<div class="col-xs-3 col-sm-3 col-md-3 resume">
<img >
</div>
<div class="col-xs-3 col-sm-3 col-md-3 websites">
<img >
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 waterfall">
<img >
</div>
<div class="col-xs-6 col-sm-6 col-md-6 middlebox">
<p id="middletext"><strong></strong><br></p>
</div>
</div>
</div>
and here is the corresponding CSS:
.col-xs-3{
height: 33vh;
margin-bottom: 3vh;
padding: 0;
border: 2px solid black;
}
.col-xs-3.resume{
margin-top: 3vh;
}
.col-xs-3.websites{
height: 60vh;
margin-top: 3vh;
}
.col-xs-6{
height: 33vh;
margin-bottom: 3vh;
padding: 0px;
border: 2px solid black;
}
.col-xs-6.about{
margin-top: 3vh;
}

Answer 1

Another option for this sort of no-gaps layout is to use something like Masonry, although it's probably overkill if your actual layout is as simple as your example.

Answer 2

One way that I can think of is to use one div as parent for the first 2 columns:
html:
<div class="container">
<div class="row">
<div class="col-xs-9 col-sm-9 col-sm-9" >
<div class="col-xs-8 col-sm-8 col-md-8 about">
<img >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 resume">
<img >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 waterfall">
<img >
</div>
<div class="col-xs-8 col-sm-8 col-md-8 middlebox">
<p id="middletext"><strong></strong><br></p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 websites">
<img >
</div>
</div>
</div>
css
.col-xs-4{
height: 33vh;
margin-bottom: 3vh;
padding: 0;
border: 2px solid black;
}
.resume{
margin-top: 3vh;
}
.websites{
height: 68vh;
margin-top: 3vh;
border: 2px solid black;
}
.col-xs-8{
height: 33vh;
margin-bottom: 3vh;
padding: 0px;
border: 2px solid black;
}
.col-xs-8.about{
margin-top: 3vh;
}