Заказ столбцов через Bootstrap4

У меня есть 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>

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

1-3-2

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

2018 - Возвращаясь к этому вопросу с последней версией Bootstrap 4.

Ответная классы заказа теперь order-first, order-lastи order-0-order-12

Классы push pull в Bootstrap 4 теперь push-{viewport}-{units}и, pull-{viewport}-{units}а xs-инфикс удален. Чтобы получить желаемый макет 1-3-2 на мобиле / хз: Bootstrap 4 push pull demo (это работает только до бета версии 4.0)

Bootstrap 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 Direction

Демоверсии старых версий
демо - альфа 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

даже это будет работать:

<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 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>

РЕДАКТИРОВАТЬ:

Ооо ... похоже, что то, что я написал выше, в точности a. pull-xs-right класс в Bootstrap 4: X Просто добавьте его во второй столбец, и он должен работать отлично.

Поскольку упорядочение столбцов не работает в бета-версии Bootstrap 4, как описано в коде, приведенном в повторном ответе выше, вам необходимо будет использовать следующее (как указано в демонстрации порядка кодирования Flexbox 4 - альфа / бета-ссылки, которые были предоставлены в ответ).

<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 - бета» относится к альфа-кодовой базе, и изменение кодовой базы на бета-версию (и ее запуск) приводит к тому, что блоки div некорректно отображаются в одном столбце, но это выглядит как проблема с кодом, так как вырезание и вставка кода из codeply работает, как описано.

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