У меня есть страница Bootstrap:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Похож:
-----
|A|B|
-----
Итак, если я смотрю на него на мобильном устройстве, столбец A находится сверху, но я хочу, чтобы B был сверху. Это возможно? Я попробовал это с нажатием, но это не сработало.
Используйте Порядок столбцов, чтобы выполнить это. Также см. эту статью о заказе столбцов
col-md-push-6 будет "толкать" столбец вправо 6, а col-md-pull-6 "потянет" столбец влево на "md" или больше портов просмотра. На каких-либо меньших портах просмотра столбцы будут в нормальном порядке снова.
Я думаю, что отбрасывает людей, заключается в том, что вам нужно поставить B выше A в свой HTML. Может быть другой способ сделать это, когда A может идти выше B в HTML, но я не уверен, как это сделать...
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
|A|B|
view-port < мкр
|B|
|A|
Стоит отметить, что если вы используете столбцы, которые не равны 6, то сумма push не будет равна начальному размеру столбца.
Если у вас есть 2 столбца (A и B) и хотите, чтобы столбец A был меньше и справа на "sm" или больше видовых экранов, но поверх видового экрана мобильного (xs), вы использовали бы следующее:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
В противном случае выравнивание столбцов будет отключено.
Для Bootstrap 4 примените одно из следующих к вашему .row div:
.flex-row-reverse
Для чувствительных настроек:
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
Ниже приведен код для меня
.row {
display: flex;
flex-direction: column-reverse;
}
Теперь это делается (в Bootstrap v4) путем добавления классов order- #.
См. Https://getbootstrap.com/docs/4.1/migration/#grid-system-1.
Как это:
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
В Bootstrap 4, допустим, вы хотите иметь один заказ для больших экранов и другой порядок для небольших экранов:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
Вы можете опустить order-1 и order-2 выше. Просто добавлено для ясности. Порядок по умолчанию будет порядок, в котором столбцы появляются в HTML.
Для получения дополнительной информации https://getbootstrap.com/docs/4.1/layout/grid/#reordering
Я использовал:
.row {
display: flex;
flex-direction: row-reverse;
}
В Bootstrap V4 (выпущено 18 января 2018 г.) можно использовать классы переупорядочения. Информация здесь, под вкладкой Изменение порядка.
Это сработало для меня на Bootstrap 4:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>