Force certain column to change it's position on desktop outside of the flow

grid-auto-placement.html

<!-- https://prnt.sc/f05LCS_YIdZq -->

<div class="product-hero">
  <div class="product-media__wrapper">
    Product media
  </div>

  <div class="product__info">
    Product info
  </div>

  <div class="product-media__accordion">
    Product accordion
  </div>
</div>

<style>
  @media (min-width: 1000px) {
    .product-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .product-hero .product-media__wrapper {
      grid-row: 1 / auto;
      grid-column: 1 / 2;
    }

    .product-hero .product__info {
      grid-row: 1 / 20; /* Here is the trick to stretch the left columns */
      grid-column: 2 / 3;
    }

    .product-hero .product-media__accordion {
      grid-row: auto / auto;
      grid-column: 1 / 2;
    }
  }
</style>