Flexboxレイアウト – 横並びコンテンツの偶数番目のレイアウト変更

HTML

<div class="wrap">
  <div class="image">
    <img src="picture.jpg" alt="打ち合わせ中の写真">
  </div>
  <div class="text">
    <h2>上下中央に配置します</h2>
    <p>写真と横並びになった文章を上下中央に配置させます。</p>
  </div>
</div>

<div class="wrap">
  <div class="image">
    <img src="picture.jpg" alt="打ち合わせ中の写真">
  </div>
  <div class="text">
    <h2>上下中央に配置します</h2>
    <p>写真と横並びになった文章を上下中央に配置させます。</p>
  </div>
</div>

CSS

.wrap {
  display: flex;
  align-items: center;
  margin: 0 auto 50px;
  width: 600px;
}

.wrap:nth-child(even) {
  flex-direction: row-reverse;
}

.image {
  width: 50%;
}

.text {
  padding: 0 30px;
  width: 50%;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}