响应内容的css位置设置

我正在尝试建立一个具有多栏内容框的响应性网站

每个内容框包含一张照片、一个标题和一个标题

简而言之，我希望它们中的每一个都以这种格式显示

[十] ：图像
ABC:标题
xxx：标题

要指定，我希望在web视图中逐个显示标题和标题。

而标题将隐藏在移动视图中，标题将位于照片顶部。

请注意，标题的长度可能会有所不同，并且变得非常长，需要多行。 像这样：i.stack.imgur.com/ejElB.png（抱歉，没有足够的声誉发布超过2个链接）

我已经试了好几天了，
我只能在移动版中实现我想要的，我将标题粘贴到照片的底部。
但是，我不知道如何调整标题/capion div的位置，以便在web视图中正确显示它们。

到目前为止我所做的：（移动视图已成功完成，请调整窗口以查看）

---

这些东西我一直都是自己学的，如果它不符合标准，我很抱歉。

您的代码离您的目标已经很远了。只需在图像框外添加第二个div，标题仅在不移动时显示，并隐藏原始标题

比如（我只做了一个盒子）

更新：

---

通过使用绝对定位，将文本框放置在图像框外，移动时将其放置在图像框内，实际上可以轻松得多。就像

这正是我想要的，非常感谢！！没问题。如果我的回答对你有帮助，介意接受吗？接受，非常感谢。没问题！没有重复的标题能解决吗？