How to properly form a grid in header bootstrap?

Question

css

How to correctly form a grid in the header, where there will be a logo (1), navigation (4), some text (2,3) and information about the user (5), so that when squeezing and clicking on a hamburger, it would rise in the right order as in the figure .

Answer 1

Not
wo
n't fit here, slightly wrong structure . Yes, there is a slight duplication of code, in particular the menu, but without it there is no way, either sawing 2 different caps for different resolutions or duplicating the menu. PS You can also solve it with js, just cut the menu at resolutions below 768 and do appendTo to the right place. It's up to you to decide what is more convenient / better in your case. Hope it helped.

Answer 2

Use pull or push classes

Answer 3

If you are unable to make a structure, create a separate header block specifically for mobile.