#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:
Используйте классы, реагирующие на порядок:
<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>