针对特定引导布局的建议

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>