Move div element below, after #media screen and (max-width: ...) - html

Question

I am currently learning basics of web development and I wanted to create a simple webpage with a navigation bar, two main div elements and a footer. Ideally I would make it responsive to the window's size and when the user resizes it one of the three divs should go below the remaining two. Analogically, after further rescaling they would end up in a vertical line.
HTML code snippet:
<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) {
}
When I wrapped clock1 and clock2 in a separate div so that after first resizing 1 and 2 would stay in the same line and 3rd would go below them. Please see the screenshots for reference(I disabled 3rd div in the 2nd picture to demonstrate my desired effect).
First Image
Second Image
Thank you.

Answer 1

Add flex-wrap: wrap to bottom-conatiner -
.bottom-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: 100%;
}
The flex-wrap property specifies whether the flexible items should wrap or not.
As a side note, I removed flex-direction: row because it's a default.

Answer 2

Are you looking for something like this?
* {
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>