К странице в архиве подцеплены стили бутстрапа, которые отличаются от стандартных только отступами для строк и контейнеров. В них col-md-3
срабатывает для @media (min-width: 992px)
.
Нужно пересобрать бутстрап с вашими параметрами и подключать результат пересборки.
UPD. Пересобрал бутстрап, подставив 770px
, 1441px
и 2000px
в @screen-sm
, @screen-md
и @screen-lg
соответственно. С новым bootstrap.css
страница выглядит так, как нужно.
Как работают классы колонок в бутстрапе
В вашем коде только одна строка меняет своё поведение при переходе от -sm-
к -md-
. Это строка с классом col-md-3 col-sm-6 col-xs-12
.
В бутстрапе класс для узкого экрана продолжает действовать и на более широких, пока его не перебьют новым условием. Например, col-sm-12
действует на всех экранах шириной от 768 пикселей (@media (min-width: 768px)
), а col-xs-12
- вообще на всех.
Поэтому ваш код можно упростить:
- вместо
col-xs-12 col-sm-12 col-md-12
достаточно col-xs-12
;
- вместо
col-md-4 col-sm-4 col-xs-12
достаточно col-xs-12 col-sm-4
;
- вместо
col-md-8 col-sm-8 col-xs-12
достаточно col-xs-12 col-sm-8
и так далее.