<div class="container">
  <div class="menu">MENU</div>
  <div class="post">POST</div>
  <div class="sidebar">SIDEBAR</div>
<!--   <div class="item"></div> -->
  <div class="footer">FOOTER</div>
</div>
.container {
  display: flex;
  flex-flow: row wrap;
  * {
    flex: 1 100%;
    margin: 10px;
    height: 150px;
    display: flex;
    color: white;
    text-align: center;
    justify-content: center;
    flex-direction: column;
  }
  .menu {
    height: 50px;
    background: coral;
  }
  .post {
    background: #2196F3;
    flex: 3 0;
   }
  .sidebar {
    flex: 1 0;
    background: orange;
  }
  .footer {
    background: navy;
    height: 50px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.