1 вариант и нужен. То, что много классов, не играет никакой проблемы. Главное именовать их правильно, со смыслом.
<div class="row">
<div class="col col12 collg6 colmd7 colsm8 colxsm12">
<div class="blockText"></div>
</div>
</div>
.row - это блок с сеткой, т.к. я юзаю флексбок, это главный элемент
.col - колонка
.col12 - Сделай ширину колонки по умолчанию 12 из 12
.collg6 - Сделай ширину колонки на разрешении 1069 размером 6 из 12 (lg - large)
.colmd7 - Сделай ширину колонки на разрешении 819 размером 7 из 12 (md - middle)
.colsm8 - Сделай ширину колонки на разрешении 569 размером 8 из 12 (sm - small)
.colxsm12 - Сделай ширину колонки на разрешении 420 размером 12 из 12 (xsm - extra small)
Всё очень просто! А главное, удобно!