如果你可以定义列和行，你可以用css网格来定义，但是网格有一些限制。
你到底在做什么这个设计看起来

div{
  min-height:10px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1em;
}

.green{
  background:green;
  grid-column:1;
}

div.blue{
  background:blue;
  grid-column:1;
}

.purple{
  background:purple;
  grid-column:1;
  height: 300px;
}

.orange{
  background:orange;
  grid-column:2;
  grid-row:1;
  height: 100px;
}

.pink{
  background:pink;
  grid-column:2;
  grid-row:2
  height: 100px;
}


@media (max-width:500px){
 .grid{
    grid-template-columns: 1fr;
  }
  
  .green{
    grid-column:1;
    grid-row:1;
  }
   .orange{
    grid-column:1;
    grid-row:2;
  }
  
  .blue{
    grid-column:1;
    grid-row:3;
  }
  
  .pink{
    grid-column:1;
    grid-row:4;
  }
  
  .purple{
    grid-column:1;
    grid-row:5;
  }
  
}

<div class="grid">
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
<div class="orange"></div>
<div class="pink"></div>
</div>