0

左のPCサイズの画面を右のスマホサイズにしたときに、緑色の要素を赤と青の間に入れたいです。
やり方を教えてください。ちなみにまだコードはありません。画像の説明をここに入力

1 件の回答 1

1

Gridを使った方法をシェアします。(モバイルファースト)

...
<div class="container">
  <div class="text-container red">テキスト</div>
  <div class="image-container green">画像</div>
  <div class="text-container blue">テキスト</div>
</div>
...
.container {
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: repeat(3, 100px);
}
/* Center text */
.text-container,
.image-container {
  display: grid;
  place-items: center;
}
.text-container {
  color: white;
}
.red {
  background-color: red;
}
.green {
  background-color: greenyellow;
}
.blue {
  background-color: blue;
}

@media screen and (min-width: 450px) {
  .container {
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    grid-template-areas:
      "text-one image image"
      "text-two image image";
  }
  .text-container.red {
    grid-area: text-one;
  }
  .image-container {
    grid-area: image;
  }
  .text-container.blue {
    grid-area: text-two;
  }
}

デモ codesandbox
https://codesandbox.io/s/stakoverflow-jp-resposible-mi3xk8?file=/style.css:0-736

モバイル
モバイルビュー

デスクトップ
デスクトップビュー

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。