использование разных классов, в зависимости от ширины экрана, можно организовать с помощью классов (уж простите за тавтологию) hidden-* и visible-* где * может быть xs,sm,md и т.д. Назначение этих класов скрывать либо показывать элементы к которым они применены.
с помощью этих классов можно для каждой ширины сделать свой вариант разметки.
вот пример который виден только на малых экранах, соответственно вы можете подкинуть к этому объекту например класс customClassSM
<div class="customClassSM hidden-xs visible-sm hidden-md hidden-lg">
...
</div>
вот вариант который виден уже на средних экранах и к нему можно применить класс customClassMD соответственно
<div class="customClassMD hidden-xs hidden-sm visible-md hidden-lg">
...
</div>
скомбинировав таким образом вашу разметку можно достичь нужного результата. Вот пример для всех разрешений
<div class="customClassXS visible-xs hidden-sm hidden-md hidden-lg">
применяется класс customClassXS</div>
<div class="customClassSM hidden-xs visible-sm hidden-md hidden-lg">
применяется класс customClassSM</div>
<div class="customClassMD hidden-xs hidden-sm visible-md hidden-lg">
применяется класс customClassMD</div>
<div class="customClassLG hidden-xs hidden-sm hidden-md visible-lg">
применяется класс customClassLG</div>
В итоге у Вас одновременно только один элемент будет с классом visible-* и соответственно его customClass* и будет применен
sm
наxs
,md
наsm
и так далее.col-md-3 col-sm-5 col-xs-7
.