Порядок столбцов в Bootstrap 4 не работает

Question

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2">1
    </div>
    <div class="col-lg-4 col-md-12 order-1">2
    </div>
  </div>
</div>

У меня есть 2 столбца, которые я хочу заказать по-разному на настольном и мобильном устройствах.Order-1 отлично работает на мобильном телефоне.Но это работает и на рабочем столе.Помогите изменить заказ только для мобильного просмотра в Bootstrap 4.

Answer 1

Вам нужно только сделать это ...

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-12 order-md-2">1
        </div>
        <div class="col-lg-4 col-md-12 order-1">2
        </div>
    </div>
</div>

https://www.codeply.com/go/1niA4HHVoV

Answer 2

Bootstrap - это мобильный сначала .Вам нужно будет добавить другой класс для больших дисплеев.

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-sm-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-sm-2">2
    </div>
  </div>
</div>

Точки останова сетки основаны на медиазапросах минимальной ширины, то есть они применяются к этой одной точке останова и ко всем вышеупомянутым точкам (например, .order-sm- * относится к малым, средним, большим и дополнительнымбольшие устройства, но не первая точка останова xs).

---

Обратите внимание, что у вас есть классы order-2 и order-1.Эти классы такие же, как order-xs-*.
Итак, если вы хотите, чтобы специальные правила только для больших дисплеев (lg и xl), просто добавьте классы:

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-lg-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-lg-2">2
    </div>
  </div>
</div>