У меня есть 3 столбца, которые я хочу упорядочить по-разному на компьютере и мобильном устройстве. Сейчас мой пояс выглядит так:
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
В мобильном представлении я хочу получить следующий результат:
1-3-2
К сожалению , я не понимаю , как решить эту проблему с .col-md-push-*
и .col-md-pull-*
классов в Bootstrap 4.
css
bootstrap-4
grid
Cray
источник
источник
Ответы:
2018 - Возвращаясь к этому вопросу с последней версией Bootstrap 4.
Ответная классы заказа теперь
order-first
,order-last
иorder-0
-order-12
Классы push pull в Bootstrap 4 теперь(это работает только до бета версии 4.0)push-{viewport}-{units}
и,pull-{viewport}-{units}
аxs-
инфикс удален. Чтобы получить желаемый макет 1-3-2 на мобиле / хз: Bootstrap 4 push pull demoBootstrap 4.1+
Поскольку Bootstrap 4 - это flexbox, изменить порядок столбцов легко. Столбцы могут быть упорядочены от
order-1
доorder-12
, в ответ, например,order-md-12 order-2
(последнийmd
, второйxs
) относительно родителя.row
.<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div>
Демо: изменение порядка с помощью
order-*
классовРабочий стол (большие экраны):
Мобильные (маленькие экраны):
Также можно изменить порядок столбцов с помощью утилит направления flexbox ...
<div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div>
Демонстрация: Bootstrap 4.1 Изменить порядок с помощью Flexbox Direction
Демоверсии старых версий
демо - альфа 6
демо - бета (3)
См. Больше демонстраций заказа Bootstrap 4.1+
Связано:
порядок столбцов в Bootstrap 4 с push / pull и col-md-12
Bootstrap 4 изменяет порядок столбцов
ACB ABC
источник
order-*
классы нельзя использовать несколько раз. Вот как это работает. Из документации .. «Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2). Включает поддержку от 1 до 12 на всех пяти уровнях сетки».order-2 order-md-12
классы нельзя использовать вместе?order-md-1 order-sm-2
иorder-1 order-sm-2
не работай. Я делаю это вручнуюЭтого также можно добиться с помощью свойства CSS «Порядок» и медиа-запроса.
Что-то вроде этого:
@media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } }
Ссылка на CodePen: https://codepen.io/preston206/pen/EwrXqm
источник
даже это будет работать:
<div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div>
источник
Я использую Bootstrap 3, поэтому я не знаю, есть ли более простой способ сделать это Bootstrap 4, но этот css должен работать для вас:
.pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } }
... и добавьте класс во второй столбец:
<div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div>
РЕДАКТИРОВАТЬ:
Ооо ... похоже, что то, что я написал выше, в точности a. pull-xs-right класс в Bootstrap 4: X Просто добавьте его во второй столбец, и он должен работать отлично.
источник
Поскольку упорядочение столбцов не работает в бета-версии Bootstrap 4, как описано в коде, приведенном в повторном ответе выше, вам необходимо будет использовать следующее (как указано в демонстрации порядка кодирования Flexbox 4 - альфа / бета-ссылки, которые были предоставлены в ответ).
<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div>
Обратите внимание, однако, что «Демо-версия заказа Flexbox - бета» относится к альфа-кодовой базе, и изменение кодовой базы на бета-версию (и ее запуск) приводит к тому, что блоки div некорректно отображаются в одном столбце, но это выглядит как проблема с кодом, так как вырезание и вставка кода из codeply работает, как описано.
источник
Вы можете сделать два разных контейнера: один с мобильным заказом и скрыть на экране рабочего стола, другой с порядком рабочего стола и скрыть на экране мобильного
источник