JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
<div class='big'></div>
<div class='big'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

SCSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.4rem;
}

.grid div {
  height: 10rem;
}

.grid div:not(.big) {

  background: gray;

  @media (max-width: 400px) {
    &:nth-of-type(odd) {
      grid-column: 1 / span 2;
    }

    &:nth-of-type(even) {
      grid-column: 3 / span 2;
    }
  }
}

.grid div.big {
  background: tomato;

  &:nth-of-type(odd) {
    grid-column: 1 / span 2;
  }

  &:nth-of-type(even) {
    grid-column: 3 / span 2;
  }

  @media (max-width: 400px) {
    &:nth-of-type(odd) {
      grid-column: 1 / span 4;
    }

    &:nth-of-type(even) {
      grid-column: 1 / span 4;
    }
  }
}