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>

对特定引导程序布局的建议

1 个答案: