Вот так выглядит макет в lg
.
На мобильных устройствах, sm
, я хочу, чтобы порядок столбцов был: 1, 3, 5, 2, 6, 4
Возможно ли и / или достаточно просто использовать Bootstrap 4.0 или переписать?
Все мои попытки с использованием order-sm
1-12 потерпели неудачу.Я не могу получить колонку 4 до конца, чтобы быть последней колонкой, однако я продолжаю.
Переместить 4 в конец на мобильных устройствах - самая важная реструктуризация, если то, что я спрашиваю, невозможно.
_______________________
| | |
| 1 | 2 |
|_________________| |
| | |_____|
| 3 | 4 | |
| | | 5 |
| | |_____|
| |_____| |
|___________| | 6 |
| |
|_____|
<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
<div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
1
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
2
</div>
<div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
3
</div>
<div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
4
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
5
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
6
</div>
</div>
РЕДАКТИРОВАТЬ: Это почти то, что я хочу, но код создает разрыв между столбцами 1 и 3. Кроме того, столбец 6 опускается ниже столбца 3. Желаемое место для столбца 6 ниже 5.
_______________________
| | |
| 1 | 2 |
|_________________| |
_________________|_____|
| | | |
| 3 | 4 | 5 |
| | |_____|
| |_____|
|___________|
| |
| 6 |
| |
|_____|
<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 d-flex flex-row flex-wrap'>
<div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-md-1 order-lg-1'>
1
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-4 order-sm-4 order-md-4 order-lg-2'>
2
</div>
<div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-2 order-sm-2 order-md-2 order-lg-3'>
3
</div>
<div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-6 order-sm-6 order-md-6 order-lg-4'>
4
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-3 order-sm-3 order-md-3 order-lg-5'>
5
</div>
<div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-5 order-md-5 order-lg-6'>
6
</div>
</div>