Как выстроить элементы в шапке при трансформации меню в «гамбургер»?

Question

[Aleksandr Yurchenko]

Здравствуйте!
Как правильно поступить в подобной ситуации, имею шапку такого вида:


Саму сетку делаю на smartgrid, данные элементы построены на флексах.
У контейнера для элементов (.row)

display: flex;
    flex-wrap: wrap;

У элементов находящихся в .row :

display: flex;
    justify-content: space-between;

На экране 768, убираю навигационное меню (display: none), переводя его в "гамбургер". Возможно ли верхний блок (телефон, режим работы и т.д.) перестроить по два вряд, примерно так:


P.S. сори за кривой гамбурге, дорисовывал в пейнте :)

Пробовал на 768 добавлять у .info:

flex-direction: column
align-items: flex-start

Они встают в одну колонку, что вполне логично (они находится в одном общем контейнере). Тут не выйдет поработать с данным элементом (что бы выстроить в два ряда), тоже нужно убирать с экрана и на нужной точке отображать другой блок?

Решил спросить, так как опыта в верстке не так много и хотелось бы понять, как поступать в подобных ситуация, когда требуется значительно изменить отображение элементов.

Comments

[xonar]

Можно задать им flex 50% и они как раз встанут в 2 ряда, 2 сверху по 50% и 2 снизу по 50%. Вы бы код в песочницу бы скинули.

И бургер рисовать не стоило в пэинте)) Можно span сделать и псевдоэлементы сверху, снизу и вот вам бургер)

[Aleksandr Yurchenko]

xonar,

И бургер рисовать не стоило в пэинте)) Можно span сделать и псевдоэлементы сверху, снизу и вот вам бургер)

Само собой :) это я дорисовал для общего понимания, реализую на css конечно.

Вы бы код в песочницу бы скинули.

Вы правы, вот ссылка, тут без изображений. Но общий смысл виден.
Кстати пробовал дать flex 50%, что-то не вышло :(

[xonar]

Aleksandr Yurchenko, Вот - https://codepen.io/ruslan-lysenko/pen/VwYwoQZ

Ul info вам нужно задать flex-wrap: wrap;

А самим лишкам li, задаём flex: 50%;

.topLine nav .item-2 .row .info {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  
  .info li {
    flex: 50%;
  }

И теперь когда телефон, почта и т.д. не помещаются, они выстраиваются в 2 строки.

[xonar]

И не обращайтесь вот так .topLine nav .item-2 .row .info можно же просто к элементу по его классу обратиться .info

[Aleksandr Yurchenko]

xonar, Блин и ответом не отметить :) Спасибо!

[xonar]

Aleksandr Yurchenko, Добавил ответом, можете отмечать)

Answer 1

[xonar]

https://codepen.io/ruslan-lysenko/pen/VwYwoQZ

Comments

[Aleksandr Yurchenko]

Спасибо! :)

[xonar]

Aleksandr Yurchenko, Обращайтесь))