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

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

https://webref.ru/css/columns

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

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

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

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

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