Bootstrap 3列顺序

Question

我正在为数据呈现制作一个响应式的盒子布局，我需要将一些列从移动视图交换到正常，反之亦然。我已经阅读了所有相关的内容，但推拉式课程似乎只是横向推动。 这就是我希望它表现的方式：

普通视图

移动视图

这是我的代码，没有使用pull和push类。为了避免混淆，第二列中有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

您可以使用嵌套。手机上1-3-2-4，大手机1-2-3-4。

col-*

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

确保将内部row包裹在map标记中，以获得正确的间距和对齐方式。

Answer 2

将第一个和第三个放在同一列中，将2和4放在下一列

中

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