如何在兄弟图像元素周围包装两个文本元素

Question

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

1. A 和 B 在 C 上连续
   
2. A 右侧的列中的 B 和 C
   

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

.story {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0 -7.5px;
}

.story>* {
  padding: 0 7.5px;
  margin-top: 20px;
}

.story .image {
  flex: 0 0 165px;
}

.story h2 {
  flex: 1 0 150px;
}

.story p {
  flex: 0 0 100%;
}

<div class="story">
  <div class="image"><img src="https://via.placeholder.com/150" alt=""></div>
  <h2>This is where the title goes</h2>
  <p>This is where the copy goes. This is where the copy goes. This is where the copy goes.</p>
</div>

Answer 1

我通过将父元素设置为固定高度并使用 padding-left 并将图像绝对定位在该填充内来解决此问题。不优雅，但很有效。