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

I have the below section on my website. I have 2 rows both with 3 cols each. on lg screens the cols are -6 each so the 3rd col is pushed on to a new separate row by its self.

I would like 1 of the cols from the second row to join the 3rd col(from the first row) which is now sitting alone on its own row. I'm not sure how to do this. Can anyone help?

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

CodePudding user response：

Don't start a new row. Keep a single row, and put all your column code within it. The output will be 3 columns (x2) in xl, and will become 2 columns (x3) in lg. You might need to add a custom margin to all the elements of the col depending on the output you're getting.