Invisible footer on the small screen in flexbox layout

Question

After I change the width of my page my footer is disappearing.

I would like my page to display in columns after reducing the width. My footer is out of the container, because when I'm setting it to the container it's on right of the fourth element in my container. I don't know how to put in in the correct place (bottom of the page).

Code

.container > *{
  padding: 10px;
  flex: 1
}
.container{
  display: flex;
  height: 400px;
}

@media screen and (max-width: 800px) {
.container{
  flex-direction: column;
}
}

<div class="header">
</div>
<div class="container">
      <div class="lol first"> 
          <div class="list">
          </div>
      </div>
       <div class="lol second"> 
       </div>
        <div class="lol third"> 
        </div>
         <div class="lol fourth">
         </div>
</div>
      <div class="footer">  
      </div>
</div>

Answer 1

You could put height on.lol instead of container:

.container{
  display: flex;
  flex-wrap: ;
}
.lol {
  height: 400px;
}

https://codepen.io/jfitzsimmons/pen/gOYBdrq