Html 如何将大屏幕图像下方的figcaption位置更改为手机图像的右侧？

我想将标题从图像底部传递到右侧，就像我在接下来的图像中显示的那样。在笔记本电脑或平板电脑中，我需要图片下方的标题，但在网站改为手机时，则需要图片右侧的标题。我尝试了媒体查询的flex，但没有任何变化

我不知道是否可以这样做，因为我在搜索中没有找到任何

我怎样才能从这里通过：

为此：

我的代码是：

.content{
显示：内联flex；
宽度：85vw；
高度：100vh；
对齐内容：居中对齐；
背景颜色：绿色；
左边距：10%；
}
菲卡普顿{
证明内容：中心；
文本对齐：居中；
对齐内容：居中对齐；
对齐项目：居中；
字体系列：“Lato”，无衬线；
字号：900；
颜色：白色；
文本对齐：居中；
宽度：100%；
}
/*智能手机（纵向和横向）*/
@仅媒体屏幕
和（最小设备宽度：180px）
和（最大设备宽度：480px）{
.内容{
高度：50vh；
边际上限：25vh；
边缘底部：25vh；
左：0；
右：0；
}
.内容img{
宽度：70%；
}
菲卡普顿{
宽度：70%；
颜色：海蓝宝石；
}
}

300平方米
4.
6.
300平方米

属性应完成此工作。 要使float正确工作，您需要具有定义宽度的非内联元素

figure > * {
    float : left;
    display: block;
    width: 150px;
}

财产应该做这项工作。 要使float正确工作，您需要具有定义宽度的非内联元素

figure > * {
    float : left;
    display: block;
    width: 150px;
}

---

将

display:flex

添加到figure元素，并获得默认的

flex方向：行


.content{
显示：内联flex；
宽度：85vw；
高度：100vh；
对齐内容：居中对齐；
背景颜色：绿色；
左边距：10%；
}
身材{
显示器：flex；
}
菲卡普顿{
证明内容：中心；
文本对齐：居中；
对齐内容：居中对齐；
对齐项目：居中；
字体系列：“Lato”，无衬线；
字号：900；
颜色：白色；
文本对齐：居中；
宽度：100%；
}
/*智能手机（纵向和横向）*/
@仅媒体屏幕
和（最小设备宽度：180px）
和（最大设备宽度：480px）{
.内容{
高度：50vh；
边际上限：25vh；
边缘底部：25vh；
左：0；
右：0；
}
.内容img{
宽度：70%；
}
菲卡普顿{
宽度：70%；
颜色：海蓝宝石；
}
}

300平方米
4.
6.
300平方米
向figure元素添加
显示：flex
，并获得默认的
flex方向：行


.content{
显示：内联flex；
宽度：85vw；
高度：100vh；
对齐内容：居中对齐；
背景颜色：绿色；
左边距：10%；
}
身材{
显示器：flex；
}
菲卡普顿{
证明内容：中心；
文本对齐：居中；
对齐内容：居中对齐；
对齐项目：居中；
字体系列：“Lato”，无衬线；
字号：900；
颜色：白色；
文本对齐：居中；
宽度：100%；
}
/*智能手机（纵向和横向）*/
@仅媒体屏幕
和（最小设备宽度：180px）
和（最大设备宽度：480px）{
.内容{
高度：50vh；
边际上限：25vh；
边缘底部：25vh；
左：0；
右：0；
}
.内容img{
宽度：70%；
}
菲卡普顿{
宽度：70%；
颜色：海蓝宝石；
}
}

300平方米
4.
6.
300平方米