monochromer

Попробуйте так:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

И убедитесь, что дочерние элементы не "вылазят" из своих контейнеров.

Задача не понятна.
Если нужно, чтобы страница просто масштабировалась под viewport браузера нужно удалить мета-тег

<meta name="viewport" content="width=device-width, initial-scale=1.0">

, причем 2 раза

Если все-таки задание не точное - использовать css можно, а нельзя @media-запросы, то нужно использовать относительные единицы измерения - %, и vw, vh, vmax, vmin, em, rem для задания размеров и отступов

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

Все размеры заданы в em или rem. С помощью JavaScript менять размер шрифта на корневых элементах (html или body) в зависимости от размеров окна.

Библиотека:
elementqueries.com

Статья про нее:
https://www.smashingmagazine.com/2016/07/how-i-end...

Не уверен, но, может, это поможет (взято из normalize)

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}