سلام وقت بخیر.

یک مدیا کوئری ساده، مفید و مختصر با استفاده از span در پراپرتی grid-area :

پروژه استاد رو با یه کوئری و استفاده بهینه از span تکمیل کردم.

@media screen and (max-width: 600px) {
        .container div:nth-child(odd) {
          grid-column: 1/3;
          grid-row: 2 span;
        }
        .container div:nth-child(even) {
          grid-column: 3/5;
          grid-row: 2 span;
        }
      }

به این صورت که تمامی divهای فرد رو در طرف راست و تمامی divهای زوج رو در طرف چپ قرار دادم.

امیدوارم مفید بوده باشه.