Html 将div元素移动到@media screen和之后（最大宽度：…）

我目前正在学习web开发的基础知识，我想创建一个带有导航栏、两个主要div元素和一个页脚的简单网页。理想情况下，我会让它响应窗口的大小，当用户调整它的大小时，三个div中的一个应该低于其余两个div。类似地，在进一步重新缩放后，它们最终会变成一条垂直线

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>

当我将clock1和clock2包装在一个单独的div中，这样在第一次调整大小后，1和2将保持在同一行，而第三个将位于它们下面。请参阅屏幕截图以供参考（我在第二张图片中禁用了第三个div以演示我想要的效果）

---

谢谢。

你在找这样的东西吗

*{
框大小：边框框；
}
.底部容器{
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
宽度：100%；
}
.钟{
填充：200px0；
弹性：1050%；
边框：1px纯黑；
}
@介质（最小宽度：800px）{
.钟{
flex：自动；
}
}

添加1
添加2
添加3

添加

柔性包装：包装到底部容器-

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

柔性包裹属性指定柔性项目是否应包裹

作为旁注，我删除了
flex-direction:row
，因为这是默认设置

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