Александр

По CSS, из свежего, можно про гриды почитать: Rachel Andrew - GET READY FOR CSS GRID LAYOUT
JS для новичков, тут, думаю, ничего лучше серии HeadFirst нет: Эрик Фримен - Изучаем программирование на JavaScript

Можно воспользоваться таким замечательным CSS правилом, как !important
Вот пример: https://jsfiddle.net/te5jpo72/5/

Можно каждому N-ному блоку прерывать обтекание вот таким способом:

.col-xs-6:nth-child(2n+3) {
   clrar: both;
} /*Для строки из двух элементов*/

И через @media задать нужные вам параметры для остальных разрешений, на мой взгляд это куда проще чем прописывать <div class="clearfix visible-xs-block"></div>

frontender.info/centering-css-complete-guide

Что бы сами блоки подстраивались по высоте нужен flexbox. Но если вас устроит вариант что бы выравнивались по высоте строки, а блоки были произвольного размера можно попробовать вот такой способ: https://jsfiddle.net/tvxvmdd9/1/