* {    
    
	border: 0;  
	margin: 0;
	padding: 0;		

 }		

 body, html {
  height: 100%;
  width: 100%;
 
}	

   header, section, article, footer  { 
    display: block;  
    border-radius: 0.5em;   
    margin: 0.5em;
    padding: 0.5em;
    text-align: center;
    background: #FC6;



 }


 #contenedor_principal  {
   background-color: red;
   display: -webkit-flex;
   display:         flex;
   flex-flow: row;
   margin: 0.5em;
   height: 80%;

}


#contenedor_principal nav {
	background: #CCF;
	flex: 1 6 20%;
	order: 1;
	padding: 0.5em;
   margin: 0.5em;
}




#contenedor_principal article {
	flex: 3 1 60%;
	order: 2;
	background-color: yellow;
	padding: 0.5em;
  margin: 0.5em;

}


#article_contenedor  header  {
    background-color: blue;
    height: 80%
	
}

#article_contenedor  article  {
    background-color: blue;

}

#article_contenedor  footer  {
    background-color: blue;

}



#contenedor_principal  aside {
	background: #CCF;
	flex: 1 6 20%;
	order: 3;
	padding: 0.5em;
   margin: 0.5em;
}