How to insert elements into a responsive screen

...
<div class="container">
  <div class="text-container red">text</div>
  <div class="image-container green">Image</div>
  <div class="text-container blue">text</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) {
  US>.container{
    grid-template-columns:repeat(3,100px);
    grid-template-rows:repeat(2,100px);
    grid-template-areas:
      "text-one image image"
      "text-two image";
  }
  .text-container.red{
    grid-area:text-one;
  }
  .image-container{
    grid-area:image;
  }
  .text-container.blue{
    grid-area:text-two;
  }
}