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

Ответ 1

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

Ответ 2

Это также может быть достигнуто с помощью свойства "Заказ" 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

Ответ 3

Я использую 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 Просто добавьте его во второй столбец, и он должен работать отлично.

Ответ 4

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

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

Ответ 5

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

Ответ 6

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