基于Bootstrap Cards的移动端双列布局需求：表头与数据分列

Got it, let's tackle this responsive layout problem! The goal is to have your card-based table show as a regular multi-column layout on larger screens, and switch to a two-column "header | data" format on smaller viewports—no extra plugins needed. Here's a pure CSS approach that works seamlessly with Bootstrap and your Smarty data setup:

Step 1: Adjust Your HTML Structure #

First, we'll add a data-label attribute to each data cell, matching the corresponding header text. This lets us display the header alongside the data on small screens. I've also included Smarty loop syntax to dynamically populate your data (swap $yourDataArray with your actual variable):

<div class="container-fluid">
  <div class="card">
    <!-- Table Header (hidden on small screens) -->
    <div class="card-header d-none d-sm-block">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">name</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">date</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">age</span>
        </div>
      </div>
    </div>

    <!-- Table Body (Smarty Dynamic Loop) -->
    <div class="card-body">
      {foreach from=$yourDataArray item=row}
      <div class="row table-row">
        <div class="col-4" data-label="name">
          <span class="font-medium-3">{$row.name}</span>
        </div>
        <div class="col-4" data-label="date">
          <span class="font-medium-3">{$row.date}</span>
        </div>
        <div class="col-4" data-label="age">
          <span class="font-medium-3">{$row.age}</span>
        </div>
      </div>
      {/foreach}

      <!-- Static example rows for reference -->
      <div class="row table-row">
        <div class="col-4" data-label="name">
          <span class="font-medium-3">stewie</span>
        </div>
        <div class="col-4" data-label="date">
          <span class="font-medium-3">124214</span>
        </div>
        <div class="col-4" data-label="age">
          <span class="font-medium-3">9000</span>
        </div>
      </div>
      <div class="row table-row">
        <div class="col-4" data-label="name">
          <span class="font-medium-3">bob</span>
        </div>
        <div class="col-4" data-label="date">
          <span class="font-medium-3">45845</span>
        </div>
        <div class="col-4" data-label="age">
          <span class="font-medium-3">65</span>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2: Add Custom CSS #

We'll use media queries to restructure the layout when the viewport hits Bootstrap's sm breakpoint (768px). This hides the original header on small screens and converts each data cell into a two-part "label | data" pair:

/* Trigger at Bootstrap's sm breakpoint (smaller than 768px) */
@media (max-width: 767.98px) {
  .table-row {
    flex-direction: column;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 0;
  }

  .table-row .col-4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    width: 100% !important;
  }

  /* Pull header text from data-label attribute */
  .table-row .col-4::before {
    content: attr(data-label);
    font-weight: bold;
    color: #6c757d; /* Match Bootstrap's muted text style */
    margin-right: 1rem;
  }
}

How This Works: #

• Large Screens: The original Bootstrap col-4 grid keeps everything in a clean 3-column layout, with the header visible at the top.
• Small Screens:
  • Each row stack vertically, with subtle borders to separate entries.
  • Every data cell splits into two sections: the header label (pulled from the data-label attribute) on the left, and your actual data on the right.
  • The original header is hidden with Bootstrap's d-none d-sm-block classes to avoid redundancy.

Test It Out #

Resize your browser to see the smooth transition: on desktop, you'll get your original multi-column table; on mobile, it switches to the two-column "label | data" format you wanted.

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