<div class="wrap-pc">
  <div class="title">PCでの表示</div>
  <div class="grid">
    <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo">写真</div>
  </div>
</div>

<div class="wrap-sp">
  <div class="title">スマホでの表示</div>
  <div class="grid">
    <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
    <div class="photo">写真</div>
  </div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items: start;
  text-align: left;
}

/* スマホの時に上書きするスタイル */
.wrap-sp .grid {
  grid-template-columns: 1fr;
}
.wrap-sp .text {
  order: 1;
}

/*
実際に使う際には、メディアクエリで
同じclassに対して上書きをします。

@media screen and (max-width: XXXpx) {
.grid {
  grid-template-columns: 1fr;
}
.text {
  order: 1;
}
}

*/

/* その他の設定 */
.photo {
  background: #eceff1;
  padding: 20px 10px;
  text-align: center;
  aspect-ratio: 3 / 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.