Как сделать такое расположение блоков на Bootstrap?
Нужно, чтобы блоки на странице располагались вот так для десктопа, планшета и телефона соответственно. Для десктопа малые блоки - .col-lg-3, большой - .col-lg-6
Расположением последних легко управлять, используя стандартные бутстраповские flex и order. А вот как быть с десктопной версией?
Флексбокс в данном случае сразу отпадает, т. к. все блоки там переносятся на следующий ряд. Была мысль организовать всё это на флоатах, задав .row блочное отображение на десктопах, но они тоже что-то закапризничали.
Хотелось бы узнать, как можно решить эту проблему без использования JS (да и с использованием тоже задача нетривиальная).
Ответы (1 шт):
Автор решения: VladykoD
→ Ссылка
используй гриды. Вот тут пример https://codepen.io/julesforrest/pen/xLBbVb
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.item-a {
grid-column-start: 1;
grid-column-end: 5;
}
.item-b {
grid-column-start: 1;
grid-column-end: span 4;
}