* {
    box-sizing: border-box;
}
body {
    margin: 1em;
    font: 1.2em/1.3em 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Roboto-Light', 'Roboto Light', 'Roboto', 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', Helvetica, Arial, sans-serif;
 
}
h1 {
    font-weight: normal;
    text-align: center;
}
p {
    margin: 0 0 1em 0;
}

#main {
   margin: 0;
   padding: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row;
   flex-flow: row;
}

header,
footer,
#main > article,
#main > nav,
#main > aside {
   margin: 4px;
   padding: 1em;
}
 
#main > article {
   -webkit-flex: 4 1 0;
           flex: 4 1 0;
   -webkit-order: 2;
           order: 2;
}

#main > nav,
#main > aside {

   -webkit-flex: 1 6 0;
           flex: 1 6 0;
}
#main > nav {
   -webkit-order: 1;
           order: 1;
}
  
#main > aside {
   -webkit-order: 3;
           order: 3;
}
 
header, footer {
   display: block;
   min-height: 80px;
}


* {
  box-sizing:border-box;
}

.left {
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

.main {

  padding:20px;
  float:left;
  width:60%; /* The width is 60%, by default */
}

.right {
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }


 
/* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
}

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
  
   }
}