Порядок столбцов в 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>

Ответы

Ответ 1

ОБНОВЛЕНИЕ (ФЕВРАЛЬ 2018) - v4+

Теперь, когда загрузочная версия выпущена, вы можете добиться этого, используя 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>

Ответ 2

Обновление 2019 - Bootstrap 4. 3+

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

В более старых альфа- и бета-версиях Bootstrap 4 flex-* упорядочивания были 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-* упорядочивания 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

Ответ 3

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

Ответ 4

Вы можете использовать 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