Упорядочивание колонок в Bootstrap 4 с push / pull и col-md-12

У меня есть два столбца с классомcol-md-12 каждый.

На рабочем столе они должны отображаться так:

Col **1** 
Col **2**

В мобильном представлении должно отображаться так:

Col **2**
Col **1**

Возможно ли это с упорядочением столбцов Bootstrap?

Мой текущий код:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
 Aibrean07 июл. 2016 г., 16:26
Вы пропустили код базовой колонки ...col-xs-12
 Aibrean07 июл. 2016 г., 16:30
Это потому что это 100% ширина. Смотрите другой вопрос:stackoverflow.com/q/25714852/3739498
 Cray07 июл. 2016 г., 16:27
все еще не работает .. столбцы слишком далеко влево / вправо :(

Ответы на вопрос(4)

Обновление 2018 - Bootstrap 4.1.0

Теперь полная ширина, 12 единицcol-*-12 столбцы могут быть изменены с помощьюFlexbox упорядоченность.

В более старых альфа- и бета-версиях Bootstrap 4 утилиты заказа былиflex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Демо Bootstrap 4 Альфа

По состоянию наBootstrap 4.0.0 заказывающие утилитыorder-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Демо Bootstrap 4.1.0

Смотрите документы наhttps://getbootstrap.com/docs/4.0/layout/grid/#order-classes

 Routhinator09 окт. 2017 г., 22:56
Это должно быть предпочтительным ответом сейчас.
 dippas13 окт. 2017 г., 18:54
@kevlarr и Routhinator Привет, ребята. Я только что обновил свой ответ выше версией бета-версии.
 dippas19 февр. 2018 г., 14:51
@zimSystem бета-версия уже позволяет вам использоватьorder- Утилиты, проверьте мой ответ с октябрьским обновлением и / или CSS из бета-версии, они обновили эту утилиту;)
 kevlarr26 мая 2017 г., 16:57
Это определенно должен быть предпочтительный ответ сейчас, так как он не зависит от каких-либо внешних правил CSS и т. Д.
 Leroy10516 июн. 2018 г., 22:33
Чувак. Какова сделка для нас, людей, которые не используют Bootstrap постоянно. Почему они делают такие изменения именования. Это было больно найти. Ценю этот пост.

Ты можешь использоватьflexbox, затем вы можете использовать медиа-запросы, чтобы изменить порядок:

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}
CODEPEN

или (порядок по умолчанию на мобильных телефонах и планшетах, обратный на настольном компьютере):

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}
CODEPEN
 Cray07 июл. 2016 г., 16:29
спасибо, но я хочу различный заказ в мобильных и настольных
 max07 июл. 2016 г., 16:30
Я знаю, вы можете использовать медиа-запросы, я приведу вам пример.
 max07 июл. 2016 г., 16:37
Если вас не волнует IE9 и ниже, это хороший вариант.
 Cray07 июл. 2016 г., 16:34
может быть вариант, если нет решения с упорядочением столбцов
Решение Вопроса
ОБНОВЛЕНИЕ (ФЕВРАЛЬ 2018) - v4.0.0

когда загрузочный релиз был выпущен, вы можете добиться этого с помощьюorder служебные классы, как вы смогли сделать это в бета-версии (см. старое обновление ниже), с той разницей, что они добавили эти 3 новых класса:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}
отрывок

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

СТАРЫЕ ОБНОВЛЕНИЯ (октябрь 2017 г.) - бета-версия 4.0.0

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

(см. ответ от @ZimSystem - чтобы увидеть решение с альфа-версией)

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

 dippas07 июл. 2016 г., 16:44
@ Симон см обновленный ответ
 Cray07 июл. 2016 г., 16:36
но это бок о бок не полная ширина
 kevlarr13 окт. 2017 г., 20:49
@dippas Хорошее обновление 10/2017 - даже не осознавалorder-x утилиты существовали, очень помогли
 Cray07 июл. 2016 г., 16:49
Я проголосовал за это
 dippas07 июл. 2016 г., 16:52
это решило вашу проблему?
 Cray07 июл. 2016 г., 16:45
спасибо выглядит хорошо
 Cray07 июл. 2016 г., 16:53
Мне нужно попробовать
 dippas07 июл. 2016 г., 16:46
downvoter, хочешь объяснить downvote?
 Cray07 июл. 2016 г., 16:33
спасибо, но это не работает для столбцов полной ширины, верно?

Col 2 и одна над Col 1 и одна под ним. Затем используйтеотзывчивые утилиты чтобы скрыть и показать соответственно.

 Cray07 июл. 2016 г., 16:28
хм, кажется немного "грязным"
 Taylor Foster07 июл. 2016 г., 16:41
Если вы хотите сойти с ума по-настоящему, вы можете использовать jQuery иклонировать это и вставьте его перед колонкой 1 на$(window).resize() обработчик.
 Robert07 июл. 2016 г., 16:35
Это немного грязно, но когда мы обсуждаем колонки полной ширины, это один из лучших вариантов. Если бы вы использовали меньшие сетки, мы могли бы положиться наcol-*-push-* а такжеcol-*-pull-* достичь желаемых результатов.

Ваш ответ на вопрос