How to stack Bootstrap row inside of another row? - html

Question

I have a Bootstrap page on which I'm trying to stack different boxes.
Imgur - Image of boxes (sorry, not enough rep to upload images directly)
The green boxes are the ones currently in position, and the red ones are the ones I am having issues with. I'm using the following code (simplified) to get the green boxes:-
<div class="container">
<div class="row">
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-6" style="height:200px; background-color:green;">
</div>
</div>
</div>
I'm basically trying to create another two <div class="col-xs-3" style="height:100px; background-color:green;"> that will go underneath the current two, while also keeping the large box to the right.
I thought it would be an easy fix with a new row, or using float:left / right, but none of that seems to be working out.

Answer 1

One way to do it would be to make two 50% width columns and then divide the column on the right into two rows with two more columns in each:
.green-lrg {
background-color:green;
height:215px;
}
.green-sml {
background-color:green;
height:100px;
}
.red-sml {
background-color:red;
height:100px;
}
.col-xs-6 .row {
padding-top:15px;
}
.col-xs-6 .row:first-child {
padding-top:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-xs-6">
<div class="green-lrg"></div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Here is simple example.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 box box-big">
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
<div class="col-xs-6 box box-small">
</div>
</div>
</div>
</div>
</div>
and CSS:
.box {
background-color:green;
border:5px solid white;
}
.box-big {
height:200px;
}
.box-small {
height:100px;
}