Así que tengo una pila simple de tres párrafos en dispositivos móviles que quiero diseñar en una cuadrícula en vistas más grandes, sin cambiar el orden de origen.

a primera sección puede tener desde varias líneas hasta ningún contenid

En este caso, ¿cómo hago para que la primera fila colapse para que la segunda fila llene el espacio? IE cuando la sección superior está vacía, la última sección debe aparecer en la 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>