<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 {
    display: flex;
    flex-wrap: 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;
}
#section {
    width: 50%;
    height: 780px;
    background-color: #66BB6A;
}
#article {
    width: 25%;
    height: 780px;
    background-color: #4CAF50;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #43A047;
}
@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;
    }
}
@media (max-width: 480px){
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }           
}