<div class="wrap-pc">
  <div class="title">PCでの表示</div>

  <div class="grid">
    <div class="photo photo1">写真 ①</div>
    <div class="text text1">テキスト ①<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo photo2">写真 ②</div>
    <div class="text text2">テキスト ②<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo photo3">写真 ③</div>
    <div class="text text3">テキスト ③<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
  </div>

</div>

<div class="wrap-sp">
  <div class="title">スマホでの表示</div>

  <div class="grid">
    <div class="photo photo1">写真 ①</div>
    <div class="text text1">テキスト ①<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo photo2">写真 ②</div>
    <div class="text text2">テキスト ②<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo photo3">写真 ③</div>
    <div class="text text3">テキスト ③<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

  </div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: 0.9em;
}
.photo1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  aspect-ratio: 1 / 1; /* 写真の高さ確保用 */
}
.text1 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.photo2 {
  grid-column: 3 / 4;
  grid-row: 2 / 5;
}
.text2 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.photo3 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}
.text3 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

/* スマホの時に上書きするスタイル */
.wrap-sp .grid {
  grid-template-columns: 1fr;
}
.wrap-sp .grid > div {
  grid-column: auto;
  grid-row: auto;
}
.wrap-sp .photo {
  aspect-ratio: 3 / 2; /* 写真の高さ確保用 */
}

/* その他の設定 */
.photo {
  background: #eceff1;
  padding: 20px 10px;
}
.text {
  text-align: left;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.