如何將兩行中的列合并到移動的新行中？

我的網站上有以下部分。我有 2 行，每行 3 列。在 lg 螢屏上，cols 每個都是 -6，所以第三個 col 被它自己推到一個新的單獨的行。

我希望第二行的 1 列加入第三列（從第一行開始），它現在單獨坐在自己的行上。我不知道該怎么做。任何人都可以幫忙嗎？

<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>```

uj5u.com熱心網友回復：

不要開始新的一行。保留一行，并將所有列代碼放在其中。輸出將是 3 列 (x2) in xl，并將成為 2 列 (x3) in lg。您可能需要col根據您獲得的輸出為 的所有元素添加自定義邊距。

標籤：html css 网络 html-table 行

上一篇：如何用PHP將SimpleXML解釋為HTML？

下一篇：有ipv4網路地圖嗎？