Changing HTML content order depending on screen size [duplicate] - html

Question

This question already has answers here:
What is the best way to move an element that's on the top to the bottom in Responsive design
(4 answers)
Closed 9 years ago.
I'm wondering if there is a way to change the order of HTML content depending on screen size.
This is the main website header, it shows correctly on every media query.
<h1>title</h1>
<nav>inline list items</nav>
<h2>subtitle</h2>
Basicly it looks like this:
H1 TEXT
H2 TEXT-----------------LIST ITEMS
(or check out http://www.jeroenduijker.nl/test/ and resize the screen)
As soon as the media query steps in (#media only screen and (max-width: 480px) {})
, the h2 gets squished, and i'd prefer to put the nav bar above the h1.
Is there an easy way to make the html go:
-----------------LIST ITEMS
H1 TEXT
H2 TEXT
Hopefully i've explained it well enough, i hope you can help me out, i'd appreciate it!

Answer 1

You could write two nav bars and have one hidden and the other visible, and then just switch that based on the media query.
HTML:
<nav class="show-mobile">
...
</nav>
<h1>title</h1>
<nav class="hide-mobile">
...
</nav>
<h2>subtitle</h2>
CSS:
#media only screen and (max-device-width: 480px) {
.show-mobile {
display: block;
}
.hide-mobile {
display: none;
}
}
#media only screen and (min-device-width: 481px) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
Or two H1 elements, one before the nav and one after and have them switch visibility based on the media query.
<h1 class="hide-mobile"></h1>
<nav>
...
...
</nav>
<h1 class="show-mobile">Title</h1>
<h2>subtitle</h2>
Or you could tell the nav to have absolute positioning at the top when the mobile media query is active.
#media only screen and (max-device-width: 480px) {
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 44px
}
}