Переупорядочивание сетки Bootstrap при адаптивности?

Question

[Mesuti]

Привет!
Помогите разобраться с Bootstrap 4

Есть два одинаковых дива.

Код

<div class="container">
  <div class="row">
       <div class="col-md-2">LEFT</div>
       <div class="col-md-2">RIGHT</div>
       </div>
   </div>

Jsfiddle песочница
Как поменять их порядок только в уменьшенном адаптивном варианте?
Чтобы на телефонах Левый стал правым, а Правый стал левым.
(Либо при складывании Правый стал вверху, а Левый внизу)
* push и pull не работают.
* order-1 order-2 работают в целом, но не в адаптивности

Answer 1

[doweb]

order-lg-1
order-md-2
order-sm-3

И так до 12.

Comments

[Mesuti]

Ага, спасибо!
Получилось, только если полностью прописывать порядок.

<div class="container">
  <div class="row">
       <div class="col-md-2 order-lg-1 order-md-1 order-sm-2">LEFT</div>
       <div class="col-md-2 order-lg-2 order-md-2 order-sm-1">RIGHT</div>
       </div>
   </div>

[doweb]

Александр Сорокин, lg можете убрать
То что выполняется для md, точно так же будет работать и на lg-экранах и еще больше.

[Сергей delphinpro]

Александр Сорокин, в Bootstrap применен принцип mobile first
Удобнее и понятнее писать классы соответственно
order-sm-2 order-md-1 order-lg-1
сразу видно, что lg лишний, ибо стили применяются «от и выше»