Подскажите как реализовать

Добрый день, есть шаблон сайта (скриншот прилагается, качество так себе, читабельно). Суть в том что 3 столбца: блог, книги, авторы, отображаются на главной странице. После добавления шаблона в modx, как разделить отображение по категориям в 3 столбца?
При открытии какого либо элемента (статья в блоге, книга, или автора) информация должна разворачиваться на всю ширину.
Подскажите где почитать? что гуглить? или решение данной задачи.

Можно рисунок того, как должна выглядеть страница после клика на статью, книгу и автора? Действительно ли это нужно? Насколько я понял, получится так себе, если оценивать удобство.
Для решения задачи стоит изучить Bootsrap. Предположим, есть три колонки, по 33% каждая (class="col-lg-4 col-md-4 col-sm-4 col-xs-4"). Тогда при клике на элемент внутри определённой колонки нужно просто поменять её ширину (class="col-lg-12 col-md-12 col-sm-12 col-xs-12").
И, конечно, нужно решить, что делать с остальными колонками. Вероятно, сделать им ширину 50% (class="col-lg-6 col-md-6 col-sm-12 col-xs-12").
Отлавливать клик по элементу внутри колонки, конечно же, с помощью jQuery.