Changing HTML content order depending on screen size [duplicate]

Question

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
  }
}