Bootstrap 4 колонки заказа

Question

Итак, у меня есть 3 столбца {см-2, см-7, см-3}, и я пытался изменить порядок на мобильных телефонах, как этот {см-7 (сверху), см-2, см-3}.Я пытался вытащить sm-7 и нажать sm 2 следующим образом:

 col-xs-pull-2 on sm7  
 col-xs-push-7 on sm2

Я также пытался заказать их так,

col-order-xs-1`   (on sm7)  
col-order-xs-2- 
col-order-xs-3

, но этого не произошлоработать либо.

Я также попробовал классы первого порядка и последнего заказа, но безуспешно.Чего мне не хватает?

Answer 1

Вам нужно что-то подобное?

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-2 order-sm-2">A</div>
    <div class="col-12 col-sm-7 order-sm-1">B</div>
    <div class="col-12 col-sm-3 order-sm-3">C</div>
  </div>
</div>

Answer 2

Я изменил порядок элементов html следующим образом: sm7 sm2 sm3.Затем я просто изменил порядок на больших экранах (sm +), используя order-sm-1, order-sm-2, order sm-3 в соответствующем столбце, и это сработало: D