TailwindCSS适配求助：桌面列布局转移动端行布局

针对你桌面端4列网格、移动端需将表头转为列布局的需求，提供两种实用实现方式：

方案一：内嵌表头文本（无额外CSS） #

直接在每个数据项中嵌入表头文本，通过Tailwind响应式类控制显示隐藏，结构直观易维护：

<!-- 桌面端专属表头 -->
<div class="grid grid-cols-4 gap-4 font-bold hidden md:block">
  <div>Price</div>
  <div>Size</div>
  <div>Color</div>
  <div>Status</div>
</div>

<!-- 数据行容器 -->
<div class="space-y-4">
  <!-- 第一行数据 -->
  <div class="md:grid md:grid-cols-4 md:gap-4">
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Price:</span>
      <span>$29.99</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Size:</span>
      <span>M</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Color:</span>
      <span>Blue</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Status:</span>
      <span>In Stock</span>
    </div>
  </div>

  <!-- 第二行数据 -->
  <div class="md:grid md:grid-cols-4 md:gap-4">
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Price:</span>
      <span>$49.99</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Size:</span>
      <span>L</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Color:</span>
      <span>Red</span>
    </div>
    <div class="flex flex-col md:flex-row md:items-center">
      <span class="font-bold md:hidden">Status:</span>
      <span>Out of Stock</span>
    </div>
  </div>
</div>

核心逻辑： #

• 桌面端（md及以上）显示独立表头行，每个数据行用md:grid-cols-4实现4列布局，同时隐藏内嵌的表头文本（md:hidden）。
• 移动端默认隐藏独立表头，每个数据项用flex flex-col垂直排列表头和数据，保持“表头: 数据”的展示形式。

方案二：伪元素注入表头（减少重复代码） #

当数据行较多时，用CSS伪元素注入表头文本，避免HTML重复代码：

HTML 结构： #

<!-- 桌面端专属表头 -->
<div class="grid grid-cols-4 gap-4 font-bold hidden md:block">
  <div>Price</div>
  <div>Size</div>
  <div>Color</div>
  <div>Status</div>
</div>

<!-- 数据行容器 -->
<div class="space-y-4">
  <!-- 第一行数据 -->
  <div class="md:grid md:grid-cols-4 md:gap-4">
    <div class="md:flex md:items-center data-item price">
      <span>$29.99</span>
    </div>
    <div class="md:flex md:items-center data-item size">
      <span>M</span>
    </div>
    <div class="md:flex md:items-center data-item color">
      <span>Blue</span>
    </div>
    <div class="md:flex md:items-center data-item status">
      <span>In Stock</span>
    </div>
  </div>

  <!-- 第二行数据 -->
  <div class="md:grid md:grid-cols-4 md:gap-4">
    <div class="md:flex md:items-center data-item price">
      <span>$49.99</span>
    </div>
    <div class="md:flex md:items-center data-item size">
      <span>L</span>
    </div>
    <div class="md:flex md:items-center data-item color">
      <span>Red</span>
    </div>
    <div class="md:flex md:items-center data-item status">
      <span>Out of Stock</span>
    </div>
  </div>
</div>

自定义CSS（可放入Tailwind自定义样式中）： #

@media (max-width: 768px) {
  .data-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
  }
  .data-item::before {
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
  .price::before { content: "Price:"; }
  .size::before { content: "Size:"; }
  .color::before { content: "Color:"; }
  .status::before { content: "Status:"; }
}

核心逻辑： #

• 给每个数据项添加专属类名，通过移动端媒体查询，用::before伪元素注入对应表头文本，减少HTML冗余。
• 桌面端仍保持4列网格布局，不影响原有展示效果。

内容的提问来源于stack exchange，提问作者Dave851