Свертывание приоритета в Bootstrap

Question

У меня есть четыре скважины в два ряда. Вот мой код:

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

Вот bootply: http://bootply.com/100389

Теперь она видна нам как:

| 1 | 3 | 
|-----|---| 
| 2 | 4 | 

В мобильных устройствах, порядок 1, то 3, то 2, а затем 4.

Но, я хочу, чтобы заказ был 1,2,3, а затем 4. Как мне это сделать?

Answer 1

Вы можете сделать это, как это ...

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

Answer 2

Если вы хотите сохранить тот же макет, с боковыми колонками бок, а не с колоннами друг на друга, попробуйте добавить col-sm-* и col-xs-* в каждой колонке div,

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-8 well"> 
      <h1>1</h1> 
     </div> 
     <div class="col-xs-4 well"> 
      <h1>3</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-8 well"> 
      <h1>2</h1> 
     </div> 
     <div class="col-xs-4 well"> 
      <h1>4</h1> 
     </div> 
    </div> 
</div>