Колонка заказа в Bootstrap 4
У меня 3 столбца, которые я хочу заказать по-разному на рабочем столе и на мобильных устройствах. В настоящее время моя привязка выглядит так:
1 2 3 В мобильном режиме я хочу иметь следующий порядок:
- Почему Bootstrap 3 переключился на размер коробки: border-box?
- Правильно ли блок внутри ?
- Твиттер Bootstrap Collapse Direction-Horizontal вместо вертикальной
- Bootstrap 4 выравнивает элементы навигационной панели вправо
- Как я могу сохранить bootstrap popover вживую, пока popover завис?
1-3-2
К сожалению, я не понимаю, как это решить с помощью classов .col-md-push- * и .col-md-pull- * в Bootstrap 4.
- Разная длительность слайда для каждого элемента на бутстрапе 3.1 карусели
- Как добавить загрузчик даты Picker Bootstrap 3 в проекте MVC 5 с использованием механизма Razor?
- Закрыть Bootstrap Modal
- Bootstrap изменяет порядок div с помощью pull-right, pull-left на 3 столбца
- css framework для приложения с существующей таблицей стилей
- Twitter Текстовое поле ввода текстовых блоков Bootstrap
- Выпадающее меню выпадающего списка Bootstrap отсутствует
- Как перезаписать стиль в Twitter Bootstrap
Пересмотр этого вопроса с помощью новейшего Bootstrap 4.0+ .
Отвечающие classы упорядочения теперь являются order-first , order-last и order-0 order-12
В classах загрузки Pushstrap 4 push-{viewport}-{units} и pull-{viewport}-{units} и xs- infix был удален.Для получения желаемого формата 1-3-2 на мобильном / xs будет: Bootstrap 4 push pull demo
Поскольку Bootstrap 4 является flexbox, легко изменить порядок столбцов. Колы можно упорядочить из order-1 на order-12 , реагируя так, как order-md-12 order-2 (последний на md , 2nd on xs ) относительно родительского .row .
1 3 2
2018 Обновление Bootstrap 4.0+
Демо-версия Col
Рабочий стол (большие экраны): 
Мобильные (экраны меньшего размера): 
Предыдущие версии демо
демо – альфа 6
демо-бета (3)
См. Больше загрузочных демонстраций Bootstrap 4.0+
Связанный:
Порядок столбцов в Bootstrap 4 с push / pull и col-md-12
Bootstrap 4 изменяет порядок столбцов
ACB ABC
Это также может быть достигнуто с помощью свойства «Заказ» 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
Я использую Bootstrap 3, поэтому я не знаю, есть ли более простой способ сделать это Bootstrap 4, но этот css должен работать на вас:
.pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } }
… и добавьте class во второй столбец:
1 2 3
РЕДАКТИРОВАТЬ:
Ох … похоже, что то, над чем я был написан выше, – это безоговорочно. pull-xs-right class в Bootstrap 4: X Просто добавьте его во второй столбец, и он должен работать отлично.
даже это будет работать:
1 2 3
Поскольку упорядочение столбцов не работает в бета-версии Bootstrap 4, как описано в коде, представленном в повторном ответе выше, вам нужно будет использовать следующее (как указано в кодексе 4 примера Flexbox – альфа-бета-ссылки, которые были представлены в ответ).
1 3 2
Однако обратите внимание, что «демо-бета бета-версии Flexbox» относится к альфа-кодовой базе, а изменение кодовой базы до бета-версии (и ее запуск) приводит к тому, что divs отображаются некорректно в одном столбце, но это выглядит как кодовая проблема с момента вставка кода из кодовых работает, как описано.
Вы можете сделать два разных контейнера с мобильным ордером и спрятаться на экране рабочего стола, другой с настольным заказом и скрыть на мобильном экране