Stack bootstrap columns vertically and horizontally next to each other - css

Question

I want to show my columns like this
Code
<div class="row">
<div id="id-orders-stats" class="col-md-6 col-sm-6">
</div>
<div class="col-md-6 col-sm-6 stats-box">
<div id="id-time-tab">
<ul class="nav nav-pills nav-justified nav-prima">
<li>Daily
</li>
<li>Weekly
</li>
<li>Monthly
</li>
<li class="active">Quarterly
</li>
<li>Yearly
</li>
</ul>
</div>
<div id="id-sales-pie">
</div>
</div>
</div>
<div class="row">
<div id="id-channel-stats" class="col-md-6 col-sm-6 stats-box ">
</div>
<div class="col-md-6 col-sm-6 stats-box">
<div id="id-sales-line">
</div>
</div>
</div>
How do i achieve this?
I have looked at javascript solutions and a css solution as well but it isn't working. Kindly help

Answer 1

Problem 1 - Container element: The #3 and #4 widgets are in a separate row from the #1 and #2 widgets. The css for the .row class will clear the floats from the previous row creating the whitespace that you are observing.
Solution: Place all your widgets in the same containing element.
Problem 2 - Floats: You are likely to still have vertical whitespace issues due to the variable heights of your widgets and the way the floats are rendered in the document flow.
Solution 1: Use CSS Columns and have your widget pairs re-flow vertically
Solution 2: Use Javascript to layout your widgets. Something like Masonry.

Answer 2

It's very simple. Bootstrap works with a grid that is divided in 12. You want your first column to be half of the page, that means you do it like this:
<div class="col-md-6"></div>
The other two items both take up a quarter of the page, so you add the class:
<div class="col-md-3"></div>
You can find all of this on the Bootstrap homepage.
Here's a fiddle for your solution: http://jsfiddle.net/zkreewdt/
Edit By bundeling the first two divs (1 and 2) in a row it means that the row will take the height of the biggest element and that the row beneath it will be automaticly aligned. I updated the fiddle. please check it