Изменение порядка столбцов в сетке CSS

ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Define 4 columns */
    gap: 10px;
    /* Optional: adds gap between rows/columns */
}

li {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Each li also has 4 columns */
}

li p:nth-of-type(1) {
    grid-column: 1;
    /* Position first p in the first column */
}

li p:nth-of-type(2) {
    grid-column: 2;
    /* Position second p in the second column */
}

li p:nth-of-type(3) {
    grid-column: 3;
    /* Position third p in the third column */
}

li p:nth-of-type(4) {
    grid-column: 4;
    /* Position fourth p in the fourth column */
}

@media (max-width: 650px) {
    ul {
        grid-template-columns: repeat(2, 1fr);
        /* Only 2 columns in the ul */
    }

    li {
        grid-template-columns: repeat(2, 1fr);
        /* Each li has 2 columns */
    }

    li p:nth-of-type(1),
    /* A and C are in the first column */
    li p:nth-of-type(3) {
        grid-column: 1;
    }

    li p:nth-of-type(2),
    /* B and D are in the second column */
    li p:nth-of-type(4) {
        grid-column: 2;
    }
}

li {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a b c d";
}

li p:nth-of-type(1) {
    grid-area: a;
}

li p:nth-of-type(2) {
    grid-area: b;
}

li p:nth-of-type(3) {
    grid-area: c;
}

li p:nth-of-type(4) {
    grid-area: d;
}

@media (max-width: 650px) {
    li {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "a c" "b d";
    }
}

<ul>
    <li>
        <p>A</p>
        <p>B</p>
        <p>C</p>
        <p>D</p>
    </li>
    <li>
        <p>AAA</p>
        <p>BBB</p>
        <p>CCC</p>
        <p>DDD</p>
    </li>
    <li>
        <p>A</p>
        <p>B</p>
        <p>C</p>
        <p>D</p>
    </li>
    <li>
        <p>AAAAAA</p>
        <p>BBBBBB</p>
        <p>CCCCCC</p>
        <p>DDDDDD</p>
    </li>
</ul>

* {   margin: 0;   padding: 0;  min-width: 0; min-height: 0; box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25em;
}

li {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: span 4;
    border: 1px solid grey;
}


@media (max-width: 650px) {
  ul {
    grid-template-columns: 1fr 1fr;
  }

  li {
    grid-row: span 2;
    grid-auto-flow: column;
  }

}

<ul>
  <li>
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
  </li>
  <li>
    <p>AAA</p>
    <p>BBB</p>
    <p>CCC</p>
    <p>DDD</p>
  </li>
  <li>
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
  </li>
  <li>
    <p>AAAAAA</p>
    <p>BBBBBB</p>
    <p>CCCCCC</p>
    <p>DDDDDD</p>
  </li>
</ul>