bootstrap + кирпичная кладка (Salvattore)

Код html:

На странице подключаю:

Стили медиа:
@media screen and (max-width: 767px) { .masonry[data-columns]::before{ content: '1 .col-xs-12'; } } @media screen and (max-width: 768px) and (max-width: 991px) { .masonry[data-columns]::before{ content: '3 .col-sm-4'; } } @media screen and (max-width: 992px)and (max-width: 1199px) { .masonry[data-columns]::before{ content: '4 .col-md-3'; } } @media screen and (max-width: 1200px) { .masonry[data-columns]::before{ content: '6 .col-lg-2'; } }
Проект запускаю в идее на том кате, для сетки использую плагин salvattore.
Желаемое: разрешение от 1200 - 6 колонок, разрешение от 992 - 4 колонки, разрешение от 768 - 3 колонки, разрешение до 767 - 1 колонка.
Реальность: при загрузке страницы на самом высоком разрешении контент выводится в одну колонку, при изменении размера - становится 6 колонок на всех разрешениях, если страницу перезагрузить в браузере на самом высоком разрешении колонки сбрасываются от 6-ти до 1-й, на остальных разрешениях остаётся 6 колонок. Что делаю не так, подскажите плз.

Ответ

У вас везде стоит max-width хотя вы задаёте рамки. Надо поставить min-width куда надо:
@media screen and (max-width: 767px) { .masonry[data-columns]::before{ content: '1 .col-xs-12'; } } @media screen and (min-width: 768px) and (max-width: 991px) { .masonry[data-columns]::before{ content: '3 .col-sm-4'; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .masonry[data-columns]::before{ content: '4 .col-md-3'; } } @media screen and (min-width: 1200px) { .masonry[data-columns]::before{ content: '6 .col-lg-2'; } }