Измените порядок col - * - 12 столбцов в Bootstrap, используя push/pull

Ответ 1

На самом деле вы не можете изменить порядок столбцов с .col-*-12 на push/pull вспомогательные классы. Сумма столбцов превышает столбцы по умолчанию 12, которые определяются @grid-columns.

Вы можете либо изменить порядок столбцов в HTML, а затем использовать классы упорядочения на больших экранах следующим образом:

ПРИМЕР ЗДЕСЬ

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

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

ПРИМЕР ЗДЕСЬ

@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

Стоит отметить, что CSS-преобразования поддерживаются в IE9; Просто не забудьте добавить префиксы поставщиков.

Ответ 2

В Bootstrap 4 вы можете изменить порядок столбцов полной ширины (12 единиц), используя классы упорядочения flexbox.

Обновление 2017 - Bootstrap 4 alpha 6

В 3.x вы можете только нажимать/тянуть столбцы влево или вправо (по горизонтали). С новыми утилитами упорядочения flexbox в 4.x теперь можно изменить порядок столбцов по вертикали...

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

Обновить бета-версию Bootstrap 4

Классифицирование упорядочения alpha flex- изменилось на order-.

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

Ответ 3

Вы можете это сделать полностью, см. Заказ столбцов сетки Bootstrap

Но, конечно, ваш пример не будет иметь никакого эффекта, поскольку xs-12 является столбцом полной ширины, поэтому это применимо только к моделям, где сумма столбцов равна 12 (или 16 или что угодно, если вы настраиваете свою сетку Bootstrap), См. Пример Bootstrap на той же странице для иллюстративных целей:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Ответ 4

Если вам нужно переупорядочить cols для реагирующего случая, например

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

вы можете использовать класс .pull-right и отменить порядок столбцов.

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

то они предназначены для col-xs-12 и отображаются правильно для других точек останова.

Ответ 5

В случае, если кто-то приходит сюда с подобной проблемой, как я, только поиск push/pull не соответствует вашим потребностям, потому что либо col-xs-12 не будет тянуть/нажимать, либо использовать более двух столбцов, что делает его более сложным для выяснения значения push/pull здесь являются моим решением.

Ниже представлено модное решение @hashemquolami

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

Хотя этот подход работает отлично, у меня есть другое решение:

Загрузочная сетка работает, плавая по столбцам слева, это легко может быть изменено с помощью css. Посмотрите на разметку ниже, так как бонус col-md-offset-1 отменен, чтобы эмулировать 5 центрированных столбцов.

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

CSS

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

JSFIDDLE

Ответ 6

У меня была такая же проблема и она была решена так:

HTML

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

CSS

@media (max-width: 767px){
    .less-than {
        display: none;
    }
    .more-than {
        display: block !important;
    }
}