Невидимый нижний колонтитул на маленьком экране в макете flexbox

Question

После изменения ширины страницы мой нижний колонтитул исчезает.

Я бы хотел, чтобы моя страница отображалась в столбцах после уменьшения ширины.Мой нижний колонтитул находится вне контейнера, потому что, когда я устанавливаю его в контейнер, он находится справа от четвертого элемента в моем контейнере.Я не знаю, как поставить в нужном месте (внизу страницы).

Код

.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

Вы можете указать высоту .lol вместо контейнера:

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

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