Html 如何围绕同级图像元素包装两个文本元素

我有三个兄弟元素图像A、标题B、副本C。在不同的宽度下，它们应该像这样对齐：

A和B排在C上

B和C位于a右侧的一列中

我想不出用CSS从布局1过渡到布局2的方法。这是#1的代码

故事{
显示器：flex；
柔性包装：包装；
对齐项目：柔性端；
利润率：0-7.5px；
}
.故事>*{
填充：0.7.5px；
边缘顶部：20px；
}
.故事.形象{
弹性：0 0 165px；
}
.故事h2{
flex:10150px；
}
.故事p{
弹性：0.100%；
}

这就是标题所在
这就是复制品的去处。这就是复制品的去处。这就是复制品的去处

我解决了这个问题，我将父元素设置为固定高度，并使用左侧填充，将图像绝对定位在该填充中。不是很优雅，但它可以工作。

我通过将父元素设置为固定高度并使用左侧填充，并将图像绝对定位在该填充中，解决了这个问题。不优雅，但它的工作