.thumb {
margin-bottom: 10px;
@extend .col-lg-3;
@extend .col-md-4;
@extend .col-xs-6;
@media (max-width: $screen-md-min) {
&:nth-child(2n + 1) {
clear: both;
}
}
@media (min-width: $screen-md-min) and (max-width: $screen-lg-min) {
&:nth-child(3n + 1) {
clear: both;
}
}
@media (min-width: $screen-lg-min) {
&:nth-child(4n + 1) {
clear: both;
}
}
}
<div class="row">
<div class="thumb">
Тут что угодно
</div>
<div class="thumb">
Тут что угодно
</div>
<div class="thumb">
Тут что угодно
</div>
<div class="thumb">
Тут что угодно
</div>
</div>
<script src="скучная_билиотека_которая_всё_сделает_за_меня.js">
. Сейчас это называется "фреймворк" и их не подключают к проекту, а строят проект на их основе. Покодить вам прийдётся еще как. Просто вы будете программировать на другом уровне: вместо того чтоб описывать низкоуровневую работу по созданию ajax запросов и прослушиванию моделей вы будете запрашивать данные, связывать их с коллекциями, сортировать эти коллекции, строить разметку на основе моделей из коллекции. По пути вы освоите работу с промисами или реактивным программирование, возможно, узнаете о том что такое неизменяющиеся состояния и с чем их едят. В целом, как современный программист, вы вырастите гораздо выше, если сразу начнёте использовать реакт или ангуляр, как посоветовал Froggyweb. По пути вам может стать интересно как что-то реализовано внутри самих фреймворков, для этого всегда можно заглянуть в их исходный код. Такие дела.
В буржуй-нете есть даже такое понятие angular-way. Это, так сказать, ангуляровский способ мышления, в котором данные определяют html, а не наоборот. Нужно немного попотеть чтоб понять как это всё устроено, но ваши старания будут вознаграждены. Для начала перестаньте использовать data-атрибуты. Это привычка из jquery и она не работает с ангуляром. Вообще никогда. Я уже 3 года на ангуляре. 2 года на первом и год на втором (четвёртом) и это ни разу не нужно было. Разве что в первую неделю работы я их пытался ввернуть, пока мне по рукам не надавали.
Удачи в освоении!