0

Нужно, чтобы блоки на странице располагались вот так для десктопа, планшета и телефона соответственно. Для десктопа малые блоки - .col-lg-3, большой - .col-lg-6 десктоп планшет телефон

Расположением последних легко управлять, используя стандартные бутстраповские flex и order. А вот как быть с десктопной версией?

Флексбокс в данном случае сразу отпадает, т. к. все блоки там переносятся на следующий ряд. Была мысль организовать всё это на флоатах, задав .row блочное отображение на десктопах, но они тоже что-то закапризничали.

Хотелось бы узнать, как можно решить эту проблему без использования JS (да и с использованием тоже задача нетривиальная).

1
  • а в чем проблема? задача же вообще изи то? ну, если ваша проблема именно в сортировке отображения блоков, то проще всего сделать используя grid-layout
    – DiD
    3 янв 2021 в 16:39

1 ответ 1

1

используй гриды. Вот тут пример 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;
}
2
  • Флоаты мне чем-то показались легче гридов. Однако сейчас попробовал, и результат превзошёл все ожидания )
    – Byulent
    3 янв 2021 в 19:31
  • флоаты и флексы проще, но они многое не могут.
    – VladykoD
    3 янв 2021 в 20:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.