Как делали адаптивные сайты раньше не имея бутстрапа и готовых сеток?
Я и сейчас старые сайты (давно сверстанные) адаптирую самыми обычными медиазапросами.
пример (вымышленный :) ):.menu {
   width: 500px;
  @media (max-width: $breakpoint) {
      width: 100px;
  }
}
.menu2 {
   width: 550px;
  @media (max-width: $breakpoint) {
      width: 150px;
  }
}

/* ... другие блоки верстки аналогично */
Пишу все условия отдельно в каждом блоке, так удобнее.
В конце пропускаю все через combine-mq чтобы объединить одинаковые медиа-запросы
Судя по css значениям, это самая простая сетка от бутстрапа))) и отличается только наименованием класса!
А если по делу, то раньше, когда не было сеток, никто не делал адаптивные сайта. Да и в сетке нет ничего магического, это просто удобная структура для расположения блоков. Просто тогда их еще не придумали. Либо делали через скрипты. Раньше были таблицы. А сетку придумали чуть после, для замены таблиц. Т.к. таблицы это не тот html тег для постраения структуры шаблона и в плане css не такой гибкий как div.
 .cols.col-6 - можно заменить на .leftCol и rightCol, каждой дать ширину по 50%  ну и флоат. Так и было.