Tailwind CSS多列布局在移动端不响应的问题求助

各位大佬好！我刚接触Tailwind CSS，完全是个新手😅。我在页面里做了一个三列的布局，但是在平板或者移动端测试的时候，这些列会互相重叠，还出现了横向滚动条，体验特别差。我想要的效果是，在小屏幕设备上，这些列能自动垂直排列，也就是一列接一列地往下放，而不是挤在一起。

具体来说，我的布局需求是这样的：

• 总共有三列：Content1、包含两行的Content2（Content2.1和Content2.2）、包含两行的Content3（Content3.1和Content3.2）
• 第二列和第三列各自内部是两行的结构

下面是我现在用的代码：

<div class="grid grid-cols-4 gap-4 grid-rows-4">
  <div class="col-span-2 border border-solid border-gray-300 ">
    Content 1
  </div>
  <div class="grid gap-4">
    <div class="border border-gray-300 border-solid row-span-2">
      Content 2.1
    </div>
    <div class="border border-gray-300 border-solid row-span-1">
      Content 2.2
    </div>
  </div>
  <div class="grid gap-4">
    <div class="border border-gray-300 border-solid row-span-1">
      Content 3.1
    </div>
    <div class="border border-gray-300 border-solid row-span-2">
      Content 3.2
    </div>
  </div>
</div>

有没有大佬能帮我看看怎么修改，让这个布局在小屏幕上正常响应，列能垂直排列呀？谢谢大家！

备注：内容来源于stack exchange，提问作者user17449555