Toggle device toolbars

Dear all,
anyone knows why my layout looks as I inted when I resize my viewport but when I used toggle device toolbars they don’t apply my code.

The second image is my viewport resized and coded applied.

html code? css code?

The code below is for the header, which will change according to the screen size.
I made two headers…one for mobile, and one for tablet and desktop.
When one header is showing, the other is hidden.

Here is the code for tablets and desktop: