Zhainar

https://habrahabr.ru/company/netcracker/blog/277433/

caniuse.com/#feat=woff

Зачем придумывать что-то, просто скопируйте дважды.

ну вот работает
https://jsfiddle.net/m8L2bx0t/1/

Основная проблема: как сделать чтобы контент в сайдбарах тоже смещался на высоту баннеров, то есть чтобы баннеры не перекрывали инфу в сайдбаре.
Сделать, чтобы баннер лег поверх сайдбаров достаточно просто, но проблему это не решает.

Почему тупо гифками не сделать

stackoverflow.com/questions/11326915/css-last-chil...

бутстрап из коробки адаптивный, если правильно использовать.

Не бейте)
https://jsfiddle.net/7yam8psh/5/

https://jsfiddle.net/00nmue7d/1/

идея про картинки тут:
stackoverflow.com/questions/2676436/define-an-imgs...

Сгруппировать малоиспользуемые пункты и под спойлер.

Я бы попробовал сделать в таблице (даты слева в ячейке, инфа справа в ячейке), с border-left каким-нибудь и абсолютным позиционированием кружочка.

Разберитесь в структуре верстки вашего сайта и верстки на бутстрапе, замените имеющиеся классы классами бутстрапа.
getbootstrap.com/css/#grid