Упорядочивание div с использованием начальной загрузки 4

Question

Если у меня есть 2 деления, и я хочу показать их в разных порядках в зависимости от точки останова размера экрана, нужно ли указывать порядок для каждого размера? например,

<div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1">
<div class="order-xs-1 order-sm-1 order-md-1 order-lg-2 order-xl-2">

Когда я попробовал это, они выглядели правильно во всех размерах, кроме xs, где они были неправильными, поэтому я подозреваю, что я делаю это неправильно.

Answer 1

Вам нужно только установить наименьшие точки останова, подразумеваются большие точки останова.Кроме того, помните, что классы упорядочения используют flexbox , поэтому они будут работать только в родительском элементе display:flex, таком как .row или .d-flex ...

<div class="d-flex">
    <div class="order-2 order-lg-1">div 1</div>
    <div class="order-1 order-lg-2">div 2</div>
</div>

https://www.codeply.com/go/YZVC3UPvoG

-xs больше не используется в Bootstrap 4. Наименьшая точка останова используется по умолчанию, поэтому она просто order-1, order-2 и т. Д.

Также см .: В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

Answer 2

В отличие от размеров, которые работали, нет order-xs.

Answer 3

Текущие доступные размеры: sm md lg xl, если вы хотите установить заказ ниже sm Размер не используйте размер перед заказом и переопределите его с желаемым размером

пример

<div class="order-sm-2 order-1">
<div class="order-sm-1 order-2">