Изменить последовательность элементов на мобильном устройстве

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня есть строка начальной загрузки с двумя столбцами, которые прерываются на устройстве с большим экраном. На рабочем столе one предшествует two — есть ли простая настройка для настройки последовательности обоих элементов, чтобы на мобильном two устройстве было раньше one .

Нужен ли мне JS для этого?

 <div className="row mx-0">
    <div className="col-lg-6 one">
         //
    </div>
    <div className="col-lg-6 two">
         //
    </div>
</div>
  

Комментарии:

1. getbootstrap.com/docs/4.5/layout/grid/#reordering

Ответ №1:

Используйте классы, реагирующие на порядок:

 <div class="row">
  <div class="col order-lg-2 order-1">Column 1</div>
  <div class="col order-lg-1 order-2">Column 2</div>
</div>
  

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row mx-0">
<div class="bg-light col order-lg-2 order-1">Column 1
</div>
<div class="bg-secondary text-white col order-lg-1 order-2">Column 2
</div>
</div>
</div>