По CSS, из свежего, можно про гриды почитать: Rachel Andrew - GET READY FOR CSS GRID LAYOUT
JS для новичков, тут, думаю, ничего лучше серии HeadFirst нет: Эрик Фримен - Изучаем программирование на JavaScript
По алгоритмам.
Недавно у Питера вышел перевод "Грокаем алгоритмы. Иллюстрированное пособие для программистов и любопытствующих". То что надо для начинающих. А дальше можно уже, классику, Кормена почитать.
Можно каждому N-ному блоку прерывать обтекание вот таким способом:
.col-xs-6:nth-child(2n+3) {
clrar: both;
} /*Для строки из двух элементов*/
И через @media задать нужные вам параметры для остальных разрешений, на мой взгляд это куда проще чем прописывать <div class="clearfix visible-xs-block"></div>
Что бы сами блоки подстраивались по высоте нужен flexbox. Но если вас устроит вариант что бы выравнивались по высоте строки, а блоки были произвольного размера можно попробовать вот такой способ: https://jsfiddle.net/tvxvmdd9/1/