Using Display Order to achieve a flexible "Holy Grail Layout".

This layout is easily achieved with flex layout:




 #main { display: flex; }

 #main > article { order: 2;

                   min-width: 12em; flex:1;}

 #main > nav     { order: 1; width: 200px; }

 #main > aside   { order: 3; width: 200px; }



As an added bonus, the columns will all be equal-height by default, and the main content will be as wide as necessary to fill the screen.

Additionally, this can then be combined with media queries to switch to an all-vertical layout on narrow screens:




@media all and (max-width: 600px) {

/* Too narrow to support three columns */

   #main { flex-flow: column; }

   #main > article, #main > nav, #main > aside {

   /* Return them to document order */

      order: 0; width: auto;

   }

}