Musiałbyś modyfikować kod Bootstrapa, ew wspomóc się jakimś SCSS bądź innym PostCSS i użyć extendowania klas - co wydłuży Ci wynikowy kod CSS.
Wiesz w czym jest problem? W tym, że Bootstrap jest zaprojektowany do d**y. Zrobili bibliotekę łamiącą wszystko, co CSS miał osiągnąć - oddzielenie szablonu od jego wyglądu. Zamiast zrobić <font color=red>
wszędzie mieliśmy dać <span class=header>
i potem jeżeli przyjdzie potrzeba zmienić kolor w jednym miejscu. Boostrap robi to samo, tylko liczbę kolumn podajemy w nazwie klasy i potem też trzeba to zmieniać wszędzie.
To jest problem prawie każdego frameworka CSS
(jak wielu nazywa takie rzeczy). Co prawda może na początku oszczędzasz czas tą metodą, ale jeżeli zamierzasz coś zmieniać to sobie dokładasz roboty. SCSS umiera, ale jakiś PostCSS z wtyczkami powinien umożliwić pisanie ładnego kodu CSS w stylu (to tylko wzór, który może nie być do odtworzenia w 100% w takiej składni):
@media-between (xs and md) {
.post {
@include column(9 of 12)
}
.ads {
@include column(3 of 12)
}
}
@media-between (lg and xl) {
.post {
@include column(6 of 12)
}
.ads {
@include column(6 of 12)
}
}
Wydaje mi sie, że co by się stało jest czytelne samo przez się :)