Portanto, tenho uma pilha simples de três parágrafos no celular que quero estilizar em uma grade em viewports maiores, sem alterar a ordem de origem.

A primeira seção pode ter de várias linhas a nenhum conteúdo.

Nesse caso, como faço para que a primeira linha seja recolhida para que a segunda linha preencha o espaço? IE, quando a seção superior está vazia, a última seção deve aparecer na parte superior

.grid  {
    display: grid;
    grid-template-rows: min-content auto;
    grid-template-columns: 60% 40%;
    grid-template-areas: 
        "main first"
        "main last";
}

.first { grid-area: first; }
.main { grid-area: main; }
.last { grid-area: last; }

<div class="grid">
  <b class="first">Grant me revenge!</b>
  <b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
  <b class="last">Make it quick because my horse is getting tired.</b>
</div>