

左のPCサイズの画面を右のスマホサイズにしたときに、緑色の要素を赤と青の間に入れたいです。  
やり方を教えてください。ちなみにまだコードはありません。[![画像の説明をここに入力](https://i.stack.imgur.com/IZRrq.jpg)](https://i.stack.imgur.com/IZRrq.jpg)


CC BY-SA 4.0
2022-07-07T10:24:39.180
89811
2022-07-09T05:56:46.570
41131
question
html css
レスポンシブ画面にしたときに要素を間に入れる方法


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

[code]

    ...
    <div class="container">
      <div class="text-container red">テキスト</div>
      <div class="image-container green">画像</div>
      <div class="text-container blue">テキスト</div>
    </div>
    ...
    
[/code]

[code]

    .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;
      }
    }
    
[/code]

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

モバイル  
[![モバイルビュー](https://i.stack.imgur.com/mKKk2.png)](https://i.stack.imgur.com/mKKk2.png)

デスクトップ  
[![デスクトップビュー](https://i.stack.imgur.com/CAiOd.png)](https://i.stack.imgur.com/CAiOd.png)


CC BY-SA 4.0
2022-07-09T05:56:46.570
89854
2022-07-09T05:56:46.570
53321
89811
answer