Grid responsivo

Oie eu tenho uma dúvida, vamos supor que no desktop eu tenho uma linha e duas colunas, mas no mobile eu quero que tenha duas linhas 1 coluna em cada linha, deu pra entender? Como faço essa quebra? Exemplo código:

.box{
    width: 35rem;
    height: 23rem;

    display: grid;
    grid-template-areas: "join" "info";
    grid-template-columns: auto;
    grid-template-rows: 45% 55%;
}

.info{
    grid-area: info;
    display: grid;
    grid-template-areas: "subscribe" "whyus";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

No info eu tenho duas colunas e uma linha né? Só que no mobile eu quero que fique duas linhas e uma coluna, uma linha com o subscribe e outra linha com o whyus, deu pra entender? Tentei fazer mas não deu certo..