How could i get this grid with Boostrap? - html

Question

What i want is to make this divisions using Bootstrap and AngularJS
What i don't know how to do is to make the divisions, i was thinking to split the container in 3 columns of 4. Also want to know if can i split the container in two columns of 6 and overlap another div to make the SECTOR 3?
This is what i said before, but this doesn't give me what i want.
<div class="container" contenteditable="false">
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-default">Button</button>
</div>
</div>
EDIT 1
Also would like to know how to get this responsiveness when loading the site on a smartphone.

Answer 1

Plunker
HTML:
<div class="container">
<div class="content">
<div class="content-body">
<div class="section1 pull-left">section 1</div>
<div class="section2 pull-right">section 2</div>
<div class="section3">section 3</div>
</div>
</div>
</div>
CSS:
/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }
.container {
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
.section1 {
width: 50%;
background: red;
height: 100%;
display:block;
}
.section2 {
width: 50%;
height: 50%;
height: 100%;
display: block;
background: blue;
}
.section3 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
height: 50%;
width: 50%;
background: yellow;
}
For responsive style changes you need to add a media query:
#media (max-width: 768px) {
.section3, .section2, .section1 {
display:block;
position: relative;
}
.section3 {
height: 10%;
width: 100%
}
.section2 {
height:60%;
width: 100%
}
.section1 {
height: 30%;
width: 100%
}
}