[html5] Content Ordering

[Nazir, Cassini]

Is it possible to re-order content using CSS without using absolute positioning? Here's what I mean:

I'm playing around with multiple stylesheets for a site that I'm working on. I would like the <nav> content to appear before the <article> content on desktops, but on mobile devices I would like the <nav> content to appear after the <article> contents.

So the code might be something like this for desktops:

  header { order:1; }     /* this would appear first */
  nav { order:2 } /* second */
  article { order:3 }       /* last */

But on mobiles something like this:

  article { order:1 }
  nav { order:2 }
  header { order:3 }

Not sure if this makes sense. Is this possible using CSS only and not PHP?

Cassini Nazir

Web Developer, Student Affairs
The University of Texas at Dallas