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

Question

我的网站上有以下部分。我有 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>```

Answer 1

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

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

How can I merge columns from two rows into a new row for mobile?

html

css

html-table

rows

web