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

80

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

Cray
источник
Это описано в документации: v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
Cray
col-xx-push- и col-xx-pull- такие же, как bootstrap 3. Вам нужна сетка для 'md' и выше 1-2, для другой строки 3 и для 'sm' и ниже 1-3-2 ?
tmg

Ответы:

139

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+


Связано:
порядок столбцов в Bootstrap 4 с push / pull и col-md-12
Bootstrap 4 изменяет порядок столбцов

ACB ABC

Зим
источник
@Alireza - order-*классы нельзя использовать несколько раз. Вот как это работает. Из документации .. «Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2). Включает поддержку от 1 до 12 на всех пяти уровнях сетки».
Зим
@Zim Значит, order-2 order-md-12классы нельзя использовать вместе?
Алиреза
Нет, их можно использовать вместе.
Зим
@Zim order-md-1 order-sm-2и order-1 order-sm-2не работай. Я делаю это вручную
Алиреза
Они работают, если вы используете версию, указанную выше codeply.com/go/23VFxwWTdP . Кроме того, я не знаю, чего вы пытаетесь достичь, что, скорее всего, отличается от исходного вопроса, к которому применим мой ответ. Помните, что столбцы относятся друг к другу в одной строке.
Зим
22

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

bprdev
источник
Я не мог навести порядок с классами начальной загрузки только для мобильных устройств. Это сработало, спасибо
Xavier Ojeda Aguilar
3

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

<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>
нихил сугандх
источник
2

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

Марек Кус
источник
Упс ... Я сделал ошибку в коде стиля: X Попробуй. А если это не сработает, попробуйте добавить! Important в float.
Marek Kus
1
Это то же самое. Я работал с классом .pull-xs-right из Bootsrap 4.
Cray
-1

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

user3893613
источник
-4

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

MarBer
источник
2
Это бы сработало, но это ненужное дублирование данных. Вы можете сделать это с помощью манипуляций с параметром float (и, возможно, другими способами).
Marek Kus