ブートストラップ3列のオーダー

Question

私はデータ提示のための反応的なボックスレイアウトを作っています。私はいくつかの列をモバイルビューから通常ビューに、またはその逆にスワップする必要があります。私は関連性のあるものはすべて読んだことがありますが、プッシュプルクラスは物事を水平方向に押し出すようです。 これは、私はそれが動作するようにする方法である：

ノーマルビュー

モバイルビュー

これは、プルとプッシュのクラスを使用せずに私のコードです。混乱を避けるために、2番目の列に4個のネストされた列がありますが、それは重要ではありませんか？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<div class="row"> 
 
    <div class="col-md-8 col-sm-12"> 
 
    <div class="tiles m-b-10"> 
 
     <div class="tiles-body"> 
 
     <div class="tiles-title text-black">OVERALL SUMMARY - ALL SURVEYS COMBINED</div> 
 
     <div class="progress"> 
 
      <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div> 
 
      <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div> 
 
      <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div> 
 
     </div> 
 
     <hr> 
 
     <div class="my-legend"> 
 
      <div class="legend-scale"> 
 
      <ul class="legend-labels"> 
 
       <li> <span class="color" style="background:#BEBADA;"></span> <span class="legend">Three</span> <span class="color" style="background:#FB8072;"></span> <span class="legend">Four</span> <span class="color" style="background:#80B1D3;"></span> <span class="legend">Five</span> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div class="lalala"></div> 
 
     <hr> 
 
     <div class="widget-stats"> 
 
      <div class="wrapper transparent"> <span class="item-title">Rolling NPS</span> <span class="item-count green-text semi-bold" data-value="15489">60</span> 
 
      </div> 
 
     </div> 
 
     <div class="widget-stats "> 
 
      <div class="wrapper last"> <span class="item-title">VCA NPS Overall</span> <span class="item-count green-text semi-bold" data-value="1450">78</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="tiles green m-b-10"> 
 
     <div class="tiles-body"> 
 
      <div class="tiles-title text-black">3 month NPS</div> 
 
      <div class="widget-stats stat-margin"> <span class="item-count semi-bold" data-value="15489">68</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="tiles green m-b-10"> 
 
     <div class="tiles-body"> 
 
      <div class="tiles-title text-black">12 vs. 3 month</div> 
 
      <div class="widget-stats"> <span class="item-count semi-bold" data-value="5695">0</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="tiles green m-b-10"> 
 
     <div class="tiles-body"> 
 
      <div class="tiles-title text-black">3 month avg. score</div> 
 
      <div class="widget-stats"> <span class="item-count semi-bold" data-value="5695">9.14</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="tiles green m-b-10"> 
 
     <div class="tiles-body"> 
 
      <div class="tiles-title text-black">12 vs. 3 month</div> 
 
      <div class="widget-stats"> <span class="item-count semi-bold" data-value="5695">0.11</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-8 col-sm-12"> 
 
    <div class="tiles m-b-10 btm-grey"> 
 
     <div class="tiles-body"> 
 
     <div class="widget-stats white-txt">Completed</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
    <div class="tiles m-b-10 btm-grey"> 
 
     <div class="tiles-body"> 
 
     <div class="widget-stats white-txt 
 
      ">Completed</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

で2と4 ...

<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
     <div class="col-md-12">1</div> 
     <div class="col-md-12">3</div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="row"> 
     <div class="col-md-12">2</div> 
     <div class="col-md-12">4</div> 
    </div> 
    </div> 
</div> 

http://www.codeply.com/go/iqGnnjFigW

col-*をrowタグで囲んで、適切な間隔と位置合わせが行われていることを確認してください。

Answer 2

同じ列に1番目と3番目の1を入れて、あなたがこのように入れ子に使用することができ、次の列

<div class=" col-md-8"> 
    block1 
    block3 
</div> 
<div class=" col-md-4"> 
    block2 
    block4 
</div>