<header>header</header> 
<div id='main'>
  <article>article</article>
  <nav>nav</nav>
  <aside>aside</aside>
</div>
<footer>footer</footer>
body {
  font: 2em Helvetica;
  background: #ddd;
  color:#666;
}

#main {
  min-height: 800px;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row;
}
 
#main > article {
  flex: 3 1 60%;
  order: 2;
}
  
#main > nav {
  flex: 1 6 20%;
  order: 1;
  }
  
  #main > aside {
   flex: 1 6 20%;
   order: 3;
  }
 
header, footer {
   display: block;
   min-height: 100px;
}

header,
#main>article,
#main>aside,
#main>nav,
footer {
  margin: .1em;
  padding: .2em;
  border-radius: 3px;
  border: 1px solid #666;
  background: white;
}
 
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
   #main, #page {
     flex-direction: column;
   }

   #main > article, #main > nav, #main > aside {
     order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
     min-height: 50px;
     max-height: 50px;
   }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.