Макет бутстрапа с переполненным рядом

Question

Я пробовал искать в google, но не нашел ничего подходящего, и поскольку stackoverflow - это самое полезное сообщество в мире, я, наверное, попробую здесь.

Я работаю над конкретным макетом магазина, и я застрял в одном месте.

Вот главный макете: http://ccommerce.c-call.eu/

и вот что должно произойти, если кто-то выбрать категорию: http://ccommerce.c-call.eu/product-tab

Проблема с отзывчивостью второго. Категория презентации строка:

<div class="col-md-12 col-sm-12 col-xs-12"> 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
     [CATEGORY] 
    </div> 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
     [CATEGORY] 
    </div> 
    <div class="col-md-4 col-sm-4 col-xs-4"> 
     [CATEGORY] 
    </div> 
</div> 

и при включении вкладки категории она выглядит:

<div class="col-md-7 col-sm-12 col-xs-12"> 
    [CATEGORIES col-xx-4] 
</div> 
<div class="col-md-5 col-sm-12 col-xs-12"> 
    [CATEGORY TAB] 
</div> 

То, что я хочу, что XS посмотреть презентацию категории должна быть одна строка с переливом, как в таблица реагирующих класс начальной загрузки, в основном, большой вид должен быть как:

и небольшой вид (хз, под 768px) должно быть как:

прямо сейчас маленькая точка зрения:

это возможно сделать это, как это? я действительно не в javascript, возможно, некоторые js с большим количеством swapping классов помогут, но, возможно, есть более простой способ?

Answer 1

Изменение свойств css с помощью медиа-запроса в категориях container - add overflow-x: auto; white-space: nowrap; и по категориям переименовывают отображение в встроенный блок.