如何将两行中的列合并到移动设备的新行中？答案

【问题标题】：How can I merge columns from two rows into a new row for mobile?如何将两行中的列合并到移动设备的新行中？
【发布时间】：2022-01-06 10:07:45
【问题描述】：

我的网站上有以下部分。我有 2 行，每行 3 列。在 lg 屏幕上，每列是 -6，因此第 3 列被自己推到一个新的单独行。

我希望第二行中的一个列加入第三列（第一行），它现在单独坐在自己的行上。我不知道该怎么做。有人可以帮忙吗？

<div class="container pt-5 pb-3" id="cardSection">
  <div class="row gx-3 gy-3">
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
      <div class="card" style="width: 23rem;">
        <img src="F:\Home\Sam\Website Homepage\appointments.jpg" class="card-img-top" alt="doctors appointment with patient">
        <div class="card-body">
          <h5 class="card-title">Appointments</h5>
          <p class="card-text">Book your appointents online with our 24/7 online service.</p>
          <a href="#" class="btn btn-primary">Book Now</a>
        </div>
      </div>

    </div>
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
      <div class="card" style="width: 23rem;">
        <img src="F:\Home\Sam\Website Homepage\prescriptions.jpg" class="card-img-top" alt="image of prescriptions">
        <div class="card-body">
          <h5 class="card-title">Prescriptions</h5>
          <p class="card-text">Order your prescriptions online with our 24/7 online service.</p>
          <a href="#" class="btn btn-primary">Order now</a>
        </div>
      </div>

    </div>
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
      <div class="card" style="width: 23rem;">
        <img src="F:\Home\Sam\Website Homepage\self help.jpg" class="card-img-top" alt="woman making a heart with hands">
        <div class="card-body">
          <h5 class="card-title">Self Help</h5>
          <p class="card-text">Find tips, guides, tools and activities to support and improve mental health.</p>
          <a href="#" class="btn btn-primary">Find help</a>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- CARD SECTION - ROW 2 -->
<div class="container pb-5">
  <div class="row gx-3 gy-3">
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
        <div class="card" style="width: 23rem;">
          <img src="F:\Home\Sam\Website Homepage\reception.jpg" class="card-img-top" alt="image of a reception area">
          <div class="card-body">
            <h5 class="card-title">Reception Enquires</h5>
            <p class="card-text">Advice on who you need to see for a number of queries.</p>
            <a href="#" class="btn btn-primary">Enter</a>
          </div>
        </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
      <div class="card" style="width: 23rem;">
        <img src="F:\Home\Sam\Website Homepage\services.jpg" class="card-img-top" alt="image of prescriptions">
        <div class="card-body">
          <h5 class="card-title">Our Services</h5>
          <p class="card-text">Discover a range of services we offer at Dene Medical Centre</p>
          <a href="#" class="btn btn-primary">Services</a>
        </div>
      </div>

    </div>
    <div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center">
        <div class="card" style="width: 23rem;">
          <img src="F:\Home\Sam\Website Homepage\PPG.jpg" class="card-img-top" alt="image of a reception area">
          <div class="card-body">
            <h5 class="card-title">Patient Participation Group</h5>
            <p class="card-text">Advice on who you need to see for a number of queries.</p>
            <a href="#" class="btn btn-primary">Enter</a>
          </div>
    </div>
  </div>
</div>```

【问题讨论】：

标签： html css web html-table rows

【解决方案1】：

不要开始一个新行。保留一行，并将所有列代码放入其中。输出将是xl 中的 3 列 (x2)，并将成为 lg 中的 2 列 (x3)。您可能需要为 col 的所有元素添加自定义边距，具体取决于您获得的输出。

【讨论】：