Bootstrap 3 column order

Question

Я делаю отзывчивый вид коробки для представления данных, и мне нужно поменять некоторые столбцы с мобильного вида на обычный или наоборот. Я прочитал все, что уместно, но классы с толстым движением кажутся просто движущимися вокруг горизонтально. Это, как я хочу, чтобы вести себя:

Стандартный вид

Мобильный вид

Это мой код без использования тянуть и толкать классы. Чтобы избежать путаницы, во втором столбце есть 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

Вы можете использовать вложенности, как это ...

<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-* s в тег row для правильного расстояния и выравнивания.

Answer 2

Поместите 1-й и 3-й один в том же столбце, а 2 и 4 в следующей колонке

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