Using CSS Grid to achieve an unbalanced Masonry Grid

Question

I am playing around with the layout of a product page and I am trying to get the right hand column to flow together a bit more. The link I have below should demonstrate the structure I am trying to achieve. The only thing I have left to do is to get the yellow to move up next to the green. I was wondering if there was an easy way to achieve this.

https://codepen.io/JBConcepts/pen/GRKXYpq

HTML

 <div class="container">
     <div class="box viewer"></div>
     <div class="box price"></div>
     <div class="box info"></div>
     <div class="box config"></div>
</div>

CSS

.container {
  width: 1200px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.box {
  min-height: 20px;
  width: calc(100% - 20px);
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
}

.viewer {
  height: 500px;
  background: red;
}

.price {
  height: 300px;
  background: green;
}

.config {
  height: 600px;
  background: yellow;
}

.info {
  height: 100px;
  background: blue;
}

@media only screen and (max-width: 1000px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  /*  Set order  */
  .viewer {
    order: 2;
  }

  .price {
    order: 1;
  }

  .config {
    order: 3;
  }

  .info {
    order: 4;
  }
}

I am not sure where to go from here but I will keep looking. I need the separation and the html structure so that I can make it flex on mobile and set the desired order.