Bootstrap multi row elements - css

Question

I am working on a design for a website and practicing bootstrap in the meantime, so I am rather new to it. Now, I understand the grid division into 12 columns and then layering of elements into multiple rows and separating by column span. The question I have is how can I handle elements that span multiple rows next to the elements that span less.
Desired Layout Example
Now, on this example image, how would I accomplish the stacking of the 3 x 4 and the 3x2 and 3x3 blocks? Also, the elements shouldn't be resized vertically.
Since I am relatively new to Bootstrap and responsive design in general, I am open for other frameworks and/or workarounds.

Answer 1

Something like this needs quite a lot of nested containers to get your desired effect but it is all possible.
The heights of some of the elements is a little bit off but once content is filled out, it should look fine.
Below is a working example
div {
border: 1px solid #000;
box-sizing: border-box;
}
div div {
border: 1px solid #444;
}
div div div {
border: 1px solid #888;
}
div div div div {
border: 1px solid #bbb;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
<div class="col-xs-1">1x1</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
3x2
</div>
<div class="row">
3x3
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-4">
3x4
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-6">
3x2
</div>
<div class="col-xs-12">
6
</div>
<div class="col-xs-12">
6
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
1
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
<div class="col-xs-2">
1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Something like below. It is not complete HTML, but it can give you an idea as to how you can use the horizontal and vertical bootstrap grids (basically through nesting):
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='container'>
<div class='row'>
<div class='form-horizontal'>
<!--First Row-->
<div class='form-group'>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
</div>
<!--Second Row-->
<div class='form-group'>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-3'>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
<div class='col-md-6'>
<div class='form-group'></div>
<div class='form-group'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>