針對特定引導佈局的建議

Question

我有一個佈局，我想在桌面顯示器上看起來像這樣。它現在或多或少地工作，但我想知道'D'和'E'部分應該是col-md-6還是col-md-3？ Desktop Layout

而且，（這就是它有趣的），在移動，我想它被奠定了這樣的： Mobile Layout

可以在一個單一的佈局工作？我忙於桌面佈局，但是，每次我切換到移動視圖時，事情都不好。因此，我有一種感覺，我最初的做法留下了一些不盡人意的地方。

Answer 1

Solution code: 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6 col-md-push-3"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <section class="box">B</section> 
      </div> 
      <div class="col-xs-6"> 
       <section class="box">D</section> 
      </div> 
      <div class="col-xs-6"> 
       <section class="box">E</section> 
      </div> 
     </div> 
     </div> 
     <div class="col-xs-6 col-md-3 col-md-pull-6"> 
     <section class="box">A</section> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
     <section class="box">C</section> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6"> 
     <section class="box">F</section> 
     </div> 
     <div class="col-xs-6"> 
     <section class="box">G</section> 
     </div> 
    </div> 
</div>