Html CSS响应分区

我正在尝试制作一个响应页面，当页面小于800px时，第二个div将下降到第二列，占页面的100%，第一个div也将占页面的100%。当前，当屏幕小于700px时，第二个div将向下移动，但第一个和第二个的位置混乱，请查找完整尺寸的图片1，移动视图时的图片2

下面是我的html和css代码

.about-us\uu sec1-image{
左：100px；
最大宽度：700px；
宽度：100%；
高度：400px；
位置：相对位置；
显示：内联块；
填充顶部：自动；
}
.关于第1段{
垂直对齐：顶部；
显示：内联块；
位置：相对位置；
顶部：20px；
利润率：10px；
背景颜色：蓝色；
高度：300px；
宽度：400px；
最大宽度：100%；
字号:30 ;；
字体系列：投石机MS；
填充：30px；
线高：1.5em；
颜色：白色；
边界半径：25px；
}

这就是大自然的美

如上所述，您应该使用媒体查询。这里是你想要实现的一个片段。希望能有帮助

.about-us\uu sec1-image{
左：100px；
最大宽度：700px；
宽度：100%；
高度：400px；
位置：相对位置；
显示：内联块；
填充顶部：自动；
}
.关于第1段{
垂直对齐：顶部；
显示：内联块；
位置：相对位置；
顶部：20px；
利润率：10px；
背景颜色：蓝色；
高度：300px；
宽度：400px；
字号:30 ;；
字体系列：投石机MS；
填充：30px；
线高：1.5em；
颜色：白色；
边界半径：25px；
}
@媒体屏幕和屏幕（最大宽度：800px）{
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.关于第1段{
显示：块；
位置：静态；
背景颜色：蓝色；
高度：300px；
宽度：自动；
保证金：0；
字号:30 ;；
字体系列：投石机MS；
填充：30px；
线高：1.5em；
颜色：白色；
边界半径：0px；
}
.about-us\uu sec1-image{
位置：静态；
}
}

这是自然之美

关于图像左侧的空白：擦除

左侧：100px来自
.about-us\uu sec1-image
-这将向右偏移元素100px（如果它有
position:relative
ike在你的情况下。
尝试媒体查询。这里有一些关于媒体查询的链接：嗨，马可，是的，它可以工作。但是身体必须设置为显示flex吗？目前我正在尝试在身体没有变化的情况下进行响应。我将身体设置为显示flex，因为你没有任何其他容器。哟你可以将图像和段落包装在一个div容器中，然后为该容器提供display flex。基本上，我使用的是主体作为容器。EDIT：对不起，不知何故，我没有看到你实际上有一个容器。尝试将display flex和flex direction设置为column，以显示你已有的包装div。结果应该与Johan相同nes，当屏幕大小如im设计的那样时，左边需要在那里，但目前我希望它在移动设备上变成两行全宽。当然，你需要一个媒体查询来将其仅应用于移动设备，类似于@media screen和（最大宽度：700px）{.about-us_uusec1-image{left:0；}