<header class="header">Header</header>
<div class="holygrail-body">
  <div class="content">Content</div>
  <ul class="nav">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
  <div class="aside">Aside</div>
</div>
<footer class="footer">Footer</footer>

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
  
  .header{
    width: 100%;
    height: 60px;
    background: pink;
  }
  
  .holygrail-body{
    flex: 1 0 auto;
    display: flex;
    
    .content{
      flex: 1 0 auto;
      background: lightgreen;
    }
    
    .nav{
      width: 100px;
      list-style: none;
      text-align: left;
      order: -1;
      background: yellow;
      margin: 0;
    }
    
    .aside{
      width: 100px;
      background: orange;
    }
  }
  
  .footer{
    width: 100%;
    height: 60px;
    background: cyan;
  }
  
  @media (max-width: 700px) {
    .holygrail-body{
       flex-direction: column;
      
      .nav, .aside{
        width: 100%;
      }
    }
  }
  
}