How to Create 4 Grid Blocks in bootstarp with full width - html

Question

How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain

Answer 1

Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>