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

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

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

ПРИМЕР ЗДЕСЬ

 
 
 
test2
 
 
 
test1
 
  

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

ПРИМЕР ЗДЕСЬ

 @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 ; Не забудьте добавить префиксы поставщиков.

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

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

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

 
 
 
1
 
2 (first on xs)
 
  

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

Обновление Bootstrap 4 Beta

flex- альфа-упорядочивания изменяются на classы заказов.

 
 
 
1
 
2 (first on xs)
 
  

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

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

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

 
 
.col-md-9 .col-md-push-3
 
.col-md-3 .col-md-pull-9
  

Если вам нужно переупорядочить 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 и отображаются правильно для других точек останова.

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

Ниже представлено модное решение @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 */ } } 

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

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

HTML

 
 
 
A
 
B
 
c
 
d
 
e
 
  

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

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

HTML

 
 
test
 
 
 
test
 
 
 
test
  

CSS

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