Переместить элемент div ниже, после экрана @media и (max-width: ...)

Question

В настоящее время я изучаю основы веб-разработки и хотел создать простую веб-страницу с панелью навигации, двумя основными элементами div и нижним колонтитулом. В идеале я бы сделал так, чтобы оно отвечало размеру окна, и когда пользователь изменяет его размер, один из трех элементов div должен go ниже остальных двух. Аналогично, после дальнейшего масштабирования они заканчиваются вертикальной линией.

HTML фрагмент кода:

<div class="bottom-container">
    <div class="clock first-two" id="clock1" data-clock>
      <p class="border">Add 1</p>
    </div>
    <div class="clock first-two" id="clock2" data-clock>
      <p class="border">Add 2</p>
    </div>
    <div class="clock" id="clock3" data-clock>
      <p class="border">Add 3</p>
    </div>
</div>

CSS:

.bottom-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
}
.clock {
  margin: 2% 0;
  padding: 200px 150px;
  height: 100%;
  align-self: center;
}

@media screen and (max-width: 1150px) {
  .first-two {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
}

@media screen and (max-width: 770px) {

}

Когда я clock1 и clock2 обернуты в отдельный div, чтобы после первого изменения размеров 1 и 2 оставались в одной строке, а 3-й - go под ними. Пожалуйста, смотрите скриншоты для справки (я отключил 3-й div на втором изображении, чтобы продемонстрировать желаемый эффект).

Первое изображение Второе изображение Спасибо.

Answer 1

Добавить flex-wrap: wrap в нижний контейнер -

.bottom-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

Свойство flex-wrap указывает, следует ли переносить гибкие элементы.

Как Примечание: я удалил flex-direction: row, потому что это значение по умолчанию.

Answer 2

Вы ищете что-то подобное?

* {
  box-sizing: border-box;
}

.bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
}

.clock {
  padding: 200px 0;
  flex: 1 0 50%;
  border: 1px solid black;
}

@media(min-width: 800px) {
  .clock {
    flex: auto;
  }
}

<div class="bottom-container">
  <div class="clock first-two" id="clock1" data-clock>
    <p class="border">Add 1</p>
  </div>
  <div class="clock first-two" id="clock2" data-clock>
    <p class="border">Add 2</p>
  </div>
  <div class="clock" id="clock3" data-clock>
    <p class="border">Add 3</p>
  </div>
</div>