Адаптивная верстка одной страницы с использование bootstrap3

Есть макет страницы в psd для экранов с разрешением ≥1200px (превью в приложении). На странице есть блоки в 4 и 3 колонки. Необходимо чтобы при уменьшении окна браузера 4х-колоночные блоки становились 3х-колоночными, 2х-колоночными и выстраивались в одну колонку так, чтобы не появлялся горизонтальный скролл.
Шрифты не стандартные. Подключать к странице следующим образом:
@font-face {
    font-family: 'PT Sans';
    src: url('ptsans-regular.eot');
    src: url('ptsans-regular.eot?#iefix') format('embedded-opentype'),
         url('ptsans-regular.woff2') format('woff2'),
         url('ptsans-regular.woff') format('woff'),
         url('ptsans-regular.ttf') format('truetype'),
         url('ptsans-regular.svg#PT Sans Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
На странице есть слайдер и 4 карусели. Они должны быть сделаны с возможностью использования на сенсорных устройствах (на пример с использованием jquery-плагина Owl Carousel 2.0).
Кроме того на странице есть функциональный элемент – карточка товара. Этот элемент должен всплывать при наведении. Там есть три варианта выбора фасовки и ввод кол-ва товара. Должна быть возможность изменения этих опций.
Таким образом результатом работы 3 типа данных: html, css, javascript и шрифты (eot,woff,woff2,ttf,svg).

Важно: допустимо только использование bootstrap v3.x.x и jquery v1.11.x и совместимых плагинов