Было бы довольно просто использовать сетку css.
Допустим, у вас есть 4 деления. Положите их в контейнер. Установите для этого контейнера значение:
container {
display: grid;
grid-template-columns: auto auto;
}
Это обычно устанавливает 2 автоматически масштабируемых столбца. а затем установите медиа-запрос для выбранной вами ширины планшета
@media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
Это означает, что до 500 пикселей будет только один столбец. Никто другой не использовал сетку css, поэтому я подумал, что было бы здорово показать.
Возможно, я перепутал столбцы и строки, потому что я тупой, но это так. Предлагаю вам узнать о медиа-запросах и css grid / flexgrid / bootstrap