By utilizing Bootstrap 3.3.7, I managed to "row span" a div across multiple rows and utilize the remaining column space for other divs. Below is an example using this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Responsive Bootstrap 3.3.7</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:0px">
<div style="background-color:green">level 1 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 2 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 3 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 4 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
<div style="background-color:green">level 5 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
</div>
<!-- Additional divs here -->
</div>
</div>
I achieved the following layout with Bootstrap 3.3.7: Bootstrap 3.3.7 example layout
However, when I tried to replicate this behavior using Bootstrap 4.1.1, I encountered a different outcome:
Bootstrap 4.1.1 example layout
In Bootstrap 4.1.1, only the first two divs occupied the remaining 6 columns while the rest were pushed below the first div. I couldn't find a solution in the documentation. Can anyone help me achieve the original behavior in Bootstrap 4?