Колонка заказа в Bootstrap 4

У меня 3 столбца, которые я хочу заказать по-разному на рабочем столе и на мобильных устройствах. В настоящее время моя привязка выглядит так:

1
2
3

В мобильном режиме я хочу иметь следующий порядок:

1-3-2

К сожалению, я не понимаю, как это решить с помощью classов .col-md-push- * и .col-md-pull- * в Bootstrap 4.

Пересмотр этого вопроса с помощью новейшего 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 отображаются некорректно в одном столбце, но это выглядит как кодовая проблема с момента вставка кода из кодовых работает, как описано.

Вы можете сделать два разных контейнера с мобильным ордером и спрятаться на экране рабочего стола, другой с настольным заказом и скрыть на мобильном экране

  • MVC 4 Редактирование модальной формы с использованием Bootstrap
  • Добавить глиффит Bootstrap в поле ввода
  • Использование link_to со встроенным HTML
  • Отображение карты Google в модальном режиме, созданном с помощью Twitter-бутстрапа
  • Как создать липкое меню левой боковой панели с помощью бутстрапа 3?
  • Как выровнять мертвую точку изображения с помощью бутстрапа
  • Уменьшение высоты бутстрапа 3.0 navbar
  • Twitter Bootstrap: div в контейнере со 100% высотой
  • Расширить строку начальной загрузки за пределами контейнера
  • Как я могу сохранить bootstrap popover вживую, пока popover завис?
  • Шрифт Awesome не работает, иконки отображаются как квадраты
  • Давайте будем гением компьютера.