Поменять местами блоки при сужении браузера

скинте демо, посмотрю что там можно сделать
 
Я примерный код уже накидал, но нужно увидеть, хочу тоже варианты накидать, ждём демо!
 
Для просмотра ссылки Войди или Зарегистрируйся как то так пойдет?) В общем " Коллекционные продукты" должны быть ниже product_content с ценой тд

А подскажите, пожалуйста, еще по поводу вот такого вопроса..немного схожего с темой. У меня есть два меню в header, в верхнем есть "Доставка", "Скидки", "Контакты" и тд, а в нижнем основные категории.. Мне нужно как то красиво их слить при адаптации, например к между "Доставка" и "Скидки" вставить раздел "Каталог" - в котором будут разварачиваться основные категории, как это можно сделать?
Код:
<header>
    <div class="main-menu">
      <nav class="header-navigation">
        <ul class="header-navigation">
             <li><a>Home</a></li>
             <li>Доставка</li>
             <li>Скидки</li>
             <li>О Нас</li>
             <li>Контакты</li>
          </ul>
       </nav>
    </div>

    <div class="head">
       Тут логотип, корзина, поиск
    </div>

    <div class="middle-menu">
        <ul class="menu-class">
             <li class="drop-menu0">Категория 1</li>
             <li class="drop-menu0">Категория 2</li>
             <li class="drop-menu0">Категория 3 </li>
             <li class="drop-menu0">Категория 4</li>
        </ul>
    </div>
</header>
 
Последнее редактирование:
Автор! Зачем Вам танцы с бубнами??? Все легко решается с помощью flexbox и медиазапросов без JS!!! display: flex и для блоков order под медиазапросы. ВСЕ!!!

Если туго с flexbox, то можно поиграться немножко и понять - Для просмотра ссылки Войди или Зарегистрируйся ))
 
Последнее редактирование модератором:
если лень играться с flexbox -сделай 2 верстки и через media меняй им display.
 
Назад
Сверху