将段落标题放在弹性框中的段落上方

Question

我目前有一个包含图像、h2 和段落的部分。对于 768px+ 的媒体查询，它需要一个 display: flex;左右对齐。但是，这当然使得 h2 位于图像和段落之间，但我希望 h2 位于段落上方并左对齐。我觉得我已经尝试了很多不同的东西，所以在这一点上有点不知所措。

Answer 1

没有看到你的代码，我有点猜测。但我认为您希望图像 > h2 > p 在彼此下方，然后在媒体查询中图像 > H2/P 彼此相邻。

如果是这样的话，只需将h2和p包裹在自己的div中，就可以控制flex方向在一定宽度上。

.wrapper {
  display: flex;
  flex-direction: column;
}
.text-wrapper {
  display: flex;
  flex-direction: column;
}

// Not sure what you want here, but changing the direction property should solve it
@media only screen and (min-width: 768px) {
  .wrapper {
  flex-direction: row;
  }
}

<div class="wrapper">
  <div> Image </div>
  <div class="text-wrapper">
    <h2> Header </h2>
    <p> Paragraph </p>
  </div>
</div>