Дима Паутов

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

https://jsfiddle.net/tpLd87o4/ - бездельник))

Херли там делать то?

Таблицу спокойно можно адаптировать меняя у неё её табличные стили на блочные

@media (max-width: 1024px) {
table,
td,
th,
tr,
tbody,
thead,
tfoot {
display: block;
}
}

и уже оформлять как и обычные дивы

Как бы это сказать. Есть физические пиксели(физический размер экнара), а есть цифровые, разрешение матрицы(1920-1080).

Ведь если мой 27 моник имеет разрешение 1920-1080, то и телефон диаметром 5 дюймов может иметь тоже разрешение, а то и больше. Но сайт, адаптируется под физические размеры устройства. О чем и свидетельствует параметр в мета теге width=device-width. device-width - Ширина девайса.

У 5 iphone физический размер экрана 320px. Поэтому и адаптивный сайт на нём будет отображаться в 320px.

Судя по css значениям, это самая простая сетка от бутстрапа))) и отличается только наименованием класса!

А если по делу, то раньше, когда не было сеток, никто не делал адаптивные сайта. Да и в сетке нет ничего магического, это просто удобная структура для расположения блоков. Просто тогда их еще не придумали. Либо делали через скрипты. Раньше были таблицы. А сетку придумали чуть после, для замены таблиц. Т.к. таблицы это не тот html тег для постраения структуры шаблона и в плане css не такой гибкий как div.

.cols.col-6 - можно заменить на .leftCol и rightCol, каждой дать ширину по 50% ну и флоат. Так и было.

Зачем столько макетов?
Если шаблон адаптивный, то он сразу должен быть резиновым и тянуться.
К примеру, возьмите свой шаблон и начните уменьшать окно браузера, как только появляется полоса прокрутки(снизу) или верстка начинает ползти, вот там первый размер для @media запроса и так далее (в хроме консоль показывает ширину окна при его уменьшении. Ну или плагины для браузера). Ваш шаблон сам скажет вам, когда нужно перестраивать блоки. Вам лишь нужно смотреть, на какой ширине экрана нужно писать @media запрос.

Пользуясь этим правилом, вам может понадобиться всего лишь 3 макета, а то и вообще обойтись без них.
1) Основной(большой для PC) - 1280 px
2) Средний(для планшета) - 1024 px
3) Маленький(для смартфона) - 480 px