Вопрос по bootstrap-4, css, grid – Заказать столбцы через Bootstrap4

44

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

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

Ваш Ответ

6   ответов
-1

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

66

2018 - Пересмотр этого вопроса с последней Bootstrap 4.

Отзывчивыйклассы заказа есть сейчасorder-first, order-last а такжеorder-0 - order-12

Бутстрап 4От себя вытащить классы сейчасpush-{viewport}-{units} а такжеpull-{viewport}-{units} иxs- инфикс был удален. Чтобы получить желаемую раскладку 1-3-2 на мобиле / хс было бы:Bootstrap 4 двухтактный демо (Это работает только до 4.0 бета)

Bootstrap 4.1+

Поскольку Bootstrap 4 - это flexbox, порядок столбцов легко изменить. Колы можно заказать уorder-1 вorder-12, отзывчиво такие какorder-md-12 order-2 (последний наmd2-й на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+ демо заказов

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

A-C-B A-B-C

@Zim, на самом деле приведенный выше код верен, но картинка и2018 Обновление Bootstrap 4.0+ демонстрация не показывает порядок 1-3-2 Dush
@ Душа работает в 4.0, но не работает так в 4.0 альфа, как описано выше Zim
@Zim Такorder-2 order-md-12 классы нельзя использовать вместе? Alireza
Нет ониМожно использоваться вместе. Zim
2

так что я не знаю, есть ли более простой способ сделать это 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>

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

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

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

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

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

роса.

Что-то вроде этого:

@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

1

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

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

Похожие вопросы