CSS-CODE
 body{ 
      margin: 0 auto;
      width: 800px;
      height: 100vh;        /*a*/
      display: flex;          /*b*/
      flex-direction: column;  /*c*/
     }
 
                     /*a-内容が100vh以上に膨らむと
                       入れないので最小でも100に設定する*/
                       /*b-横並びにする親要素にしたら子要素にも*/
                       /*c-親要素は全体的に縦にする*/



header{
    height: 110px;
    }


div{
    display: flex;  /*d*/
    flex: 1;          /*e*/ 
    }
/*d-横並びにする子要素にしたら
           親要素にもしないと効かない*/
/*e-縦にいっぱいいっぱい*/ 


  main{
    flex: 1;
      }         
 /*横にいっぱいいっぱい*/ 
 

 nav{
    width: 150px;
    }
  aside{
    width: 299px;
    }
footer{
    height: 50px;
     }
@media screen and (max-width: 900px){   

                 /*900以下でcss適用 */
   
 body,nav,aside{
    width: 100%;                       
       }
 /*横幅を100に書換る*/
   
     div{
    flex-direction: column;                    
        }
 /*縦にする*/

    main{
        order: -1;                         
        }
 /*表示の順先*/ 
        }