Html 停止文本重叠的弹性框

我正在尝试创建两个具有以下行为的flex Box。。。 1） Flex box 1以更宽的屏幕分辨率显示右侧文本的图像 2） Flex box 2以更宽的屏幕分辨率显示下面带有文本的图像 3） Flex box 1和2均将文本覆盖在图像顶部，以获得较小的屏幕分辨率

到目前为止，我下面的代码适用于场景1）和场景2）。但是，对于场景3），当我希望将具有文本覆盖的图像堆叠在彼此上方时，这些图像彼此重叠

任何关于如何解决的建议都将不胜感激

谢谢 彼得

.imgtxtrow{
显示器：flex；
位置：相对位置；
}
.imgtxtcol{
显示器：flex；
位置：相对位置；
弯曲方向：立柱；
}
.分项{
宽度：50%；
}
img{
宽度：100%；
}
.文本{
填充：25px；
}
@媒体屏幕和屏幕（最大宽度：750px）{
.分项{
位置：绝对位置；
}

一些文本



一些文本

非常简单，只需一点定位。您在媒体查询中的定位错误

.imgtxtrow{
显示器：flex；
位置：相对位置；
}
.imgtxtcol{
显示器：flex；
位置：相对位置；
弯曲方向：立柱；
}
.分项{
宽度：50%；
}
img{
宽度：100%；
}
.文本{
填充：25px；
}
@媒体屏幕和屏幕（最大宽度：750px）{
.文本{
填充：25px；
位置：绝对位置；
底部：0；
左：0；
}
}

一些文本



一些文本

谢谢Serg，这正是我想要实现的：-）有没有办法将文本对齐到右下角？当我设置CSS bottom:0；right:0时，文本将从图片中显示出来？我会说使用我的代码，但添加宽度：100%；文本对齐：right；