ブートストラップで4つのグリッドブロックを作成する方法

Question

高さと幅が4つのグリッドブロックをパーセンテージで作成して、自動的にモバイルでサイズを変更できるようにするにはどうすればよいですか？

2つ目のグリッドブロックの下の残りの2つのジグと、左の1つの大きなブロックと1つの大きなブロックと、2つ目のブロックブロックの下にある1つの大きなブロックが、これを説明できる方法です多くのことを愛し、あなたの助けに感謝します。

<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"> 
 
    <a href="#">The Diffrent typs of Desk there is</a> 
 
    </h2> 
 
     <div class="the-big-grid-featred-post-data"> 
 
      <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a> <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"> 
 
    <a href="#">The Diffrent typs of Desk there is</a> 
 
    </h2> 
 
     <div class="the-secound-grid-featred-post-data"> 
 
     <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a> <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"> 
 
    <a href="#">The Diffrent typs of Desk there is</a> 
 
    </h2> 
 
     <div class="the-third-grid-featred-post-data"> 
 
     <img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By <a href="#">Neon Emmanuel</a> <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>

画像 Below is the image of what i meain

Answer 1

ここ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>