<header>Header</header>
<div class="container">
  <article class="box1">
    Article contents<br/ >( Box 1 )
  </article>
  <nav class="box2">
    Navbar contents<br/ >( Box 2 )
  </nav>
  <aside class="box3">
    Sidebar contents<br/ >( Box 3 )
  </aside>
</div>
<footer>Footer</footer>
*{
	margin: 0;
	padding: 0;
}
body{
	padding: 2em;
	background-color: #6D899F;
}
header, footer{
	background-color: #FFFFFF;
	padding: 1em;
}
.container{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  
	width: 100%;
}
.box1{
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
  
	-webkit-box-flex: 3;
	-moz-box-flex: 3;	
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
  
	background-color: #BCD39B;
}
.box2{
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
  
	-webkit-box-flex: 1;
	-moz-box-flex: 1;	
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
  
	background-color: #CE9B64;
}
.box3{
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
  
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
  
	background-color: #62626D;
}
.box1, .box2, .box3{
	padding: 1em;
}

/* mobile layout */
@media (max-width: 480px){
	.container{
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
  
		width: 100%;
  
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
    -ms-flex-orient: vertical;
    -webkit-orient: vertical;
    orient: vertical;
	}
	.box2{
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;	}
	.box1{
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
	.box3{
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;	
}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.