Перестроить столбцы с Bootstrap 3

Question

Я кодирую статью с тремя столбцами в Bootstrap. Когда я работаю с большими экранами, похоже

Но когда я работаю с небольшими экранами, которые я хочу, чтобы это выглядело как

Как я могу это сделать?

Answer 1

Вам необходимо будет использовать Column ordering с классами .col-xx-push-* и .col-xx-pull-*.

Одним из решений может выглядеть следующим образом:

<div class="row"> 
    <div class="col-md-6 col-md-push-2 col-sm-12">B</div> 
    <div class="col-md-2 col-md-pull-6 col-sm-6">A</div> 
    <div class="col-md-4 col-sm-6">C</div> 
</div> 

играть с различными отключающей точек, изменяя md и sm, чтобы соответствовать вашим реальным потребностям.

Приведенный выше пример в действии: jsbin.com/reqilege

Answer 2

Хитрость здесь иметь ящики в порядке B, A, C. Затем вы смещаете B по ширине A и, используя абсолютное позиционирование, вы помещаете A в место освобождения.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-offset-3 col-sm-6 col-xs-12"> 
      <h1>B</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6 shift-me"> 
      <h1>A</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6"> 
      <h1>C</h1> 
     </div> 
    </div> 
</div> 

CSS

.row { 
    position: relative; 
} 
.row > div { 
    border: 2px solid black; 
} 
.shift-me { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
@media (max-width: 768px) { 
    .shift-me { 
     position: static; 
    } 
} 

http://jsfiddle.net/valentin/MkbA2/

Answer 3

Вы должны были бы pushb div в 2-й средней и pullA div в постулировать ион B div. Вы можете прочитать больше о колонке заманивать here

<div class="row"> 
    <div id="b" class="col-md-6 col-md-push-3 col-sm-12">Div B</div> 
    <div id="a" class="col-md-3 col-md-pull-6 col-sm-6">Div A</div> 
    <div id="c" class="col-md-3 col-sm-6 ">Div C</div> 
</div> 

образец Bootply here.