У меня есть два столбца с классом col-md-12 каждый.
В представлении на рабочем столе они должны отображаться следующим образом:
Col **1**
Col **2**
В мобильной версии это должно выглядеть так:
Col **2**
Col **1**
Возможно ли это даже с порядком столбцов Bootstrap?
Мой текущий код:
<div class="row">
<div class="col-xs-push-12 col-md-12">
Col 1
</div>
<div class="col-xs-pull-12 col-md-12">
Col 2
</div>
</div>
Теперь, когда начальная загрузка выпущена, вы можете добиться этого, используя order служебные классы, как вы могли сделать это в бета-версии (см. старое обновление ниже), с той разницей, что они добавили эти 3 новых класса:
.order-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.order-last {
-webkit-box-ordinal-group: 14;
-ms-flex-order: 13;
order: 13;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.p-2 {
background: red;
border: white 5px solid
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2 order-first order-lg-2">2</div>
</div>С выпуском бета-версии вы можете сделать это с помощью утилит flexbox из бутстрапа, таких как гибкий порядок
(см. ответ от @ZimSystem - чтобы увидеть решение с альфа-версией)
.p-2 {
background: red;
border: white 5px solid
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2 order-1 order-lg-2">2</div>
</div>order-x утилиты существуют, очень полезно
- person kevlarr; 13.10.2017
Обновление 2021 – бета-версия Bootstrap 5
Класс order-* работает так же...
<div class="row">
<div class="col-md-12">
Col 1
</div>
<div class="col-md-12 order-first order-md-0">
Col 2
</div>
</div>
Обновление 2019 — Bootstrap 4.3+
Теперь полную ширину, 12 столбцов col-*-12 можно поменять местами, используя порядок flexbox.
В более старых альфа- и бета-версиях Bootstrap 4 утилиты упорядочения были flex-*...
<div class="row">
<div class="col-md-12">
Col 1
</div>
<div class="col-md-12 flex-first flex-md-unordered">
Col 2
</div>
</div>
Демонстрация Bootstrap 4 Alpha
Начиная с Bootstrap 4.0.0, утилиты для заказа order-*...
<div class="row">
<div class="col-md-12">
Col 1
</div>
<div class="col-md-12 order-first order-md-2">
Col 2
</div>
</div>
См. документацию по адресу https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
order- служебные классы, проверьте мой ответ с октябрьским обновлением и / или CSS из бета-версии, они обновили эту утилиту;)
- person dippas; 19.02.2018
Один из способов обойти это — сделать две версии столбца 2 и поместить один над столбцом 1, а другой — под ним. Затем используйте адаптивные утилиты, чтобы соответствующим образом скрыть и показать.
col-*-push-* и col-*-pull-* для достижения желаемых результатов.
- person Robert; 07.07.2016
$(window).resize().
- person Taylor Foster; 07.07.2016
Вы можете использовать flexbox, затем вы можете использовать медиа-запросы для изменения порядка:
.row {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
или (порядок по умолчанию на мобильных устройствах и планшетах, обратный на рабочем столе):
@media (min-width: 992px) {
.row {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
}
col-xs-12- person Aibrean schedule 07.07.2016