*{
    padding:0;
    margin:0;
}
.container{
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:20px;
   }
header{
    background-color:black;
    color:white;
}
.flex{
    display:flex;
}
nav{
    background-color:aqua;
    width:20%;
    height:400px;
    order:1;
}
main{
    background-color: beige;
    width:60%;
    height:400px;
    order:2;
 /*  display:flex;*/
}
/*
.main-1{background-color: bisque;}
.main-21{background-color:rgba(0, 0, 255, 0.252) ;}
.main-22{background-color:rgba(0, 0, 255, 0.738);}
.main-23{background-color:rgba(0, 0, 255, 0.644);}
*/

aside{
    background-color: aquamarine;
    width:20%;
    height:400px;
    order:3;
}
footer{
    background-color: black;
    color:white;
    }
@media screen and (max-width:1024px){

}
 

@media screen and (max-width:768px){
.flex{
    display:flex;
    flex-direction: column;
}
nav{
    background-color:aqua;
    width:100%;
    height:200px;
    order:1;
}
main{
    background-color: beige;
    width:100%;
    height:400px;
    order:2;
  display:flex;
}

.main-1{background-color: bisque;}
.main-21{background-color:rgba(0, 0, 255, 0.252) ;}
.main-22{background-color:rgba(0, 0, 255, 0.738);}
.main-23{background-color:rgba(0, 0, 255, 0.644);}


aside{
    background-color: aquamarine;
    width:100%;
    height:200px;
    order:3;
}    
}
@media screen and (max-width:460px){
    
}