У меня есть страница начальной загрузки, как это:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Выглядит как:
-----
|A|B|
-----
Поэтому, если я смотрю на это на мобильном устройстве, столбец A находится сверху, но я хочу, чтобы B сверху. Это возможно? Я попробовал это с толчком, но это не сработало.
html
css
twitter-bootstrap-3
schnawel007
источник
источник
Ответы:
Используйте порядок столбцов для достижения этой цели.
col-md-push-6
«подтолкнет» столбец вправо 6 иcol-md-pull-6
«вытянет» столбец влево на «md» или более крупных view-портах. На любых меньших портах просмотра столбцы снова будут в обычном порядке.Я думаю, что отталкивает людей, это то , что вы должны поместить B выше A в своем HTML . Может быть другой способ сделать это, где A может быть выше B в HTML, но я не уверен, как это сделать ...
DEMO
view-port> = md
порт просмотра <md
источник
Стоит заметить, что если вы используете столбцы, которые не равны 6, то величина выталкивания не будет равна исходному размеру столбца.
Если у вас есть 2 столбца (A & B) и вы хотите, чтобы столбец A был меньше и правее в «sm» или более крупных видовых экранах, но поверх мобильного (xs) видового экрана, вы должны использовать следующее:
В противном случае выравнивание столбцов будет отключено.
источник
<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Для Bootstrap 4 примените одно из следующего к вашему .row div:
Для адаптивных настроек:
источник
В Bootstrap 4, скажем, вы хотите иметь один заказ для больших экранов и другой порядок для маленьких экранов:
Вы можете опустить
order-1
иorder-2
выше. Просто добавлено для ясности. По умолчанию порядок будет порядок столбцов в HTML.Для получения дополнительной информации https://getbootstrap.com/docs/4.1/layout/grid/#reordering
источник
Приведенный ниже код работает для меня
источник
Теперь это делается (в Bootstrap v4) путем добавления классов order- #.
См. Https://getbootstrap.com/docs/4.1/migration/#grid-system-1.
Как это:
источник
У меня три бутстрапа 4 колонки разных размеров. Когда экран становится меньше, третий столбец становится скрытым, а затем, когда экран становится еще меньше и элементы делятся друг на друга, порядок меняется так, что столбец 2 находится сверху.
Надеюсь, это поможет. Мне было трудно это понять, но, в конце концов, я получил это с помощью этой темы, но это было немного хитом.
источник
Это сработало для меня на Bootstrap 4:
источник
Я использовал:
источник
В Bootstrap V4 (выпущено 18 января 2018 г.) можно использовать классы переупорядочения. Информация здесь, под вкладкой Изменение порядка.
https://getbootstrap.com/docs/4.0/layout/grid/
источник
Bootstrap 4 включает в себя классы для flex. Смотрите: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
источник