Как сверстать 3 колонки для планшетов из 4 колонок для пк?

Question

[Павел Соловей]

Есть 4 колонки со списком городов, выравнены float-ами для пк. Нужно сделать 3 колонки для планшетов. В 3 колонках происходит перераспределение контента, хотелось бы реализовать как в дизайне. Возможно с использованием javascript.

Answer 1

[rinatoptimus]

Не уверен, но вдруг.

Answer 2

[Вадим Полухин]

https://webref.ru/css/columns

Answer 3

[Евгений]

@media screen and (max-width 1024px) {
    /*тут меняем стили чтобы было 3 колонки*/
}

Comments

[Павел Соловей]

В разметке 4 колонки:
col1
col2
col3
col4

Как медиазапрос повлияет на нtml с перераспределением содержимого колонок?

[Владислав]

Павел Соловей: эм, там вы можете перебить код для мобильных устройств.
Чем у вас колонки сделаны?

Answer 4

[monochromer]

Варианты реализации:
1. Если работать с float-колонками (или вообще, когда колонка в отдельном элементе), то можно обернуть две колонки в общую обертку. Потом в медиазапросе сделать их этих двух колонок одну.
2. Использовать CSS columns c деградацией.

Answer 5

[michellie]

Засовываем Div'ы в Div с заданным размером

@media (max-width 840px) {
.стиль {
width: calc(100%/3)
}
}
@media (min-width 840px) {
.стиль {
width: calc(100%/4)
}
}

Comments

[Павел Соловей]

Используя ваши стили при заданной в условии разметке на разрешении до 840px вы получите 4 колонки шириной 33.33333%. А при разрешении более 840px 4 колонки шириной 25%.

В разметке 4 колонки выравненные float:
col1
col2
col3
col4

Answer 6

[Ярослав Алексеенко]

Вот скриптами: codepen.io