Замовляйте стовпці через 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

Бутстрапа 4 натискні тягнути класи тепер push-{viewport}-{units}і pull-{viewport}-{units}та xs-Інфікси був видалений. Щоб отримати бажаний макет 1-3-2 на мобільному / xs буде: Bootstrap 4 push pull demo (Це працює лише до бета-версії 4.0)

Bootstrap 4.1+

Оскільки Bootstrap 4 є flexbox, можна легко змінити порядок стовпців. Колки можна замовляти з order-1до order-12, відповідно, наприклад order-md-12 order-2(останній md, 2-й 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

Демо- версія старшої версії - демо- версія alpha 6
- бета-версія (3)

Див. Більше демо-версії Bootstrap 4.1+

ACB ABC

Цього також можна досягти за допомогою властивості CSS "Order" та медіа-запиту.

Щось на зразок цього:

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

РЕДАГУВАТИ:

Ох ... схоже, те, про що я писав вище, є саме. pull-xs-right клас у Bootstrap 4: X Просто додайте його до другої колонки, і він повинен працювати бездоганно.

Оскільки впорядкування стовпців не працює в бета-версії Bootstrap 4, як це описано в коді, наведеному у переглянутій вище відповіді, вам доведеться використовувати наступне (як зазначено у демонстрації замовлення codeply 4 Flexbox - посилання альфа / бета, які були відповідь).

<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 з моменту вирізання та вставка коду з codeply працює, як описано.

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