https://twitter.com/chris__martin/status/1212870798618185729

page.css

.outer {
  display: grid;
  gap: 1em;
}

/* may be a bug with width=600px windows here, I'm bad at responsive */
@media (min-width: 600px) {
  .outer {
    grid-template-cols: 1fr 1fr;
    background-color: #eee;
  }
  .one, .two { margin-bottom: 1em; } /* match gap above */
  .leftcol  { grid-column: 1; }
  .rightcol { grid-column: 2; }
}
@media (max-width: 600px) {
  .outer {
    grid-template:
      "a"
      "b"
      "c"
      "d";

    background-color: #888;
  }
  /*
    magic happens here
    https://caniuse.com/#feat=css-display-contents
    a11y bug: https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents
  */
  .leftcol, .rightcol { display: contents; }

  .one   { grid-area: a; }
  .two   { grid-area: b; }
  .three { grid-area: c; }
  .four  { grid-area: d; }
}

/* change to simulate different content lengths, or rm this chunk and put a bunch of lorem ipsum in the html */
.one   { height: 100px; }
.two   { height: 50px; } /* change to 150 to see layout works with bigger thing on the right */
.three { height: 100px; }
.four  { height: 100px; }

/* non-functional aesthetics */
.outer div { border-radius: 1em; }
.one, .three { background-color: #ded; }
.two, .four {  background-color: #dde; }

page.html

<div class="outer">
  <div class="leftcol">
    <div class="one">
      one
    </div>
    <div class="three"><p>
      three</p>
    </div>
  </div>
  <div class="rightcol">
    <div class="two">
      two
    </div>
    <div class="four">
      four
    </div>
  </div>
</div>