*
{
	margin:0; padding:0;
}
header, footer {
   min-height: 100px;
   background: black;
   color:white;
}
body,html
{
  height:100%;
}
 
#main {
   display: flex;
   flex-flow: row;
   min-height:calc(100% - 200px );

}
 
#main > article {
   background: #ff6600;
   order: 2;
   flex: 3;
}
 
#main > nav {
   background: #ffd1b3;
   flex: 1;
   order: 1;
}
 
#main > aside {
   background: #ffd1b3;
   flex: 1;
   order: 3;
}
 
@media all and (max-width: 640px) {   
   #main {
      flex-flow: column;
   }
 
   #main > article, #main > nav, #main > aside {
      order: 0;
   }
 
   #main > nav, #main > aside, header, footer {
      min-height: 50px;
      max-height: 50px;
   }
}