Андрей: В целом вот ответ на ваш вопрос.
Несколько деталей:
1) .menu div - клик приходится на обертку картинки, а не на нее лично;
2) <div tabindex="0"> для того чтобы div мог работать с :focus ему необходимо задать этот параметр
Известный баг/явление с отступами у inline элементов. Побеждается несколькими способами. Например, float: left или отсуствием переноса строки в верстке:
Все просто, у каждого блока есть дополнительный контейнер позиции. В зависимости от размера экрана изменяете его размер. В итоге у вас получится что-то такое, где вы с помощью position:relative родителя и position:absolute у блока выстроите их как вам удобно уже внутри своих контейнеров
При разрешении экрана Medium и больше колонка отображается, в тех случаях когда экран меньше она автоматически скрывается и то что сейчас col-md-10 становится col-sm-12 т.е. растягивается на весь экран
UPD: Плюс там костыль стоит, так что не воспринимайте эту верстку как правильную
У вас в целом неправильно реализован метод табличной верстки bootstrap и из-за этого возникает проблема о которой говорит Алексей Скляров , поместите каждый блок в отдельную ячейку и все сработает без серьезных правок кода