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

Question

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

我想让第二排的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:HomeSamWebsite Homepageappointments.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:HomeSamWebsite Homepageprescriptions.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:HomeSamWebsite Homepageself 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:HomeSamWebsite Homepagereception.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:HomeSamWebsite Homepageservices.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:HomeSamWebsite HomepagePPG.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的所有元素添加自定义边距。