<div id="wrap">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="aside"></div>
  <div id="section"></div>
  <div id="article"></div>
  <div id="footer"></div>
</div>

 * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
 }
body {
    background-color: #E8F5E9;
}
 #wrap {
     width: 1200px;
     margin: 0 auto;
 }
 #header {
     width: 100%;
     height: 100px;
     background-color: #C8E6C9;
 }
 #nav {
     width: 100%;
     height: 100px;
     background-color: #A5D6A7;
 }
 #aside {
     width: 25%;
     height: 780px;
     background-color: #81C784;
     float: left;
 }
 #section {
     width: 50%;
     height: 780px;
     background-color: #66BB6A;
     float: left;
 }
 #article {
     width: 25%;
     height: 780px;
     background-color: #4CAF50;
     float: left;
 }
 #footer {
     width: 100%;
     height: 100px;
     background-color: #43A047;
     clear: both;
 }
 @media (max-width: 1220px){
     #wrap {
     width: 96%;
     }
 }   
 @media (max-width: 768px){
     #wrap {
     width: 100%;
     }
     #aside {
         width: 30%;
     }
     #section {
         width: 70%;
     }
     #article {
         width: 100%;
         height: 150px;
         clear: both;
     }
 }
 @media (max-width: 480px){
     #aside {
         width: 100%;
         height: 200px;
     }
     #section {
         width: 100%;
         height: 430px;
     }
 }