У меня есть 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>2018 - Пересмотр этого вопроса с последней Bootstrap 4.
Классы order-first упорядочения теперь являются order-first, order-last и order-0 - order-12
Бутстраповские 4 защелкивающихся классы теперь push-{viewport}-{units} и pull-{viewport}-{units} и xs- инфиксным были удалены.Чтобы получить желаемую раскладку 1-3-2 на мобильном устройстве /xs, необходимо: Bootstrap 4 push-pull демо (работает только до 4.0 beta)
Бутстрап 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
Демоверсии старой версии
демо - альфа 6
демо - бета (3)
Посмотрите больше Bootstrap 4. 1+ упорядочение демонстраций
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;
}
}
... и добавьте класс во второй столбец:
<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>
EDIT:
Ох... похоже, что то, что было написано выше, - это класс. pull-xs-right в Bootstrap 4: X Просто добавьте его во второй столбец, и он должен работать отлично.
даже это будет работать:
<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 4, как описано в коде, представленном в повторном ответе выше, вам нужно будет использовать следующее (как указано в кодексе 4 Flexbox demo - alpha/beta ссылки, которые были предоставлены в ответе).
<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" переходит в альфа-кодовую базу, а изменение кодовой базы до бета-версии (и ее запуск) приводит к тому, что divs отображаются некорректно в одном столбце, но это выглядит как codeply проблема, поскольку вырезание и вставка кода из кодовых работает, как описано.
Вы можете сделать два разных контейнера с мобильным ордером и скрыть на рабочем столе, другой с настольным заказом и скрыть на экране мобильного телефона