Как я могу объединить столбцы из двух строк в новую строку для мобильных устройств?

#html #css #web #html-table #rows

Вопрос:

У меня на сайте есть раздел ниже. У меня есть 2 ряда, оба по 3 колла в каждом. на экранах lg кол-6 каждый, поэтому 3-й кол сам перемещается в новую отдельную строку.

Я хотел бы, чтобы 1 из колов из второго ряда присоединился к 3-му колу(из первого ряда), который теперь сидит один в своем собственном ряду. Я не знаю, как это сделать. Кто-нибудь может помочь?

 lt;div class="container pt-5 pb-3" id="cardSection"gt;  lt;div class="row gx-3 gy-3"gt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite Homepageappointments.jpg" class="card-img-top" alt="doctors appointment with patient"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Appointmentslt;/h5gt;  lt;p class="card-text"gt;Book your appointents online with our 24/7 online service.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Book Nowlt;/agt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite Homepageprescriptions.jpg" class="card-img-top" alt="image of prescriptions"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Prescriptionslt;/h5gt;  lt;p class="card-text"gt;Order your prescriptions online with our 24/7 online service.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Order nowlt;/agt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite Homepageself help.jpg" class="card-img-top" alt="woman making a heart with hands"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Self Helplt;/h5gt;  lt;p class="card-text"gt;Find tips, guides, tools and activities to support and improve mental health.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Find helplt;/agt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;/divgt; lt;/divgt; lt;!-- CARD SECTION - ROW 2 --gt; lt;div class="container pb-5"gt;  lt;div class="row gx-3 gy-3"gt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite Homepagereception.jpg" class="card-img-top" alt="image of a reception area"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Reception Enquireslt;/h5gt;  lt;p class="card-text"gt;Advice on who you need to see for a number of queries.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Enterlt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite Homepageservices.jpg" class="card-img-top" alt="image of prescriptions"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Our Serviceslt;/h5gt;  lt;p class="card-text"gt;Discover a range of services we offer at Dene Medical Centrelt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Serviceslt;/agt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;div class="col-xl-4 col-lg-6 col-sm-12 d-flex justify-content-center"gt;  lt;div class="card" style="width: 23rem;"gt;  lt;img src="F:HomeSamWebsite HomepagePPG.jpg" class="card-img-top" alt="image of a reception area"gt;  lt;div class="card-body"gt;  lt;h5 class="card-title"gt;Patient Participation Grouplt;/h5gt;  lt;p class="card-text"gt;Advice on who you need to see for a number of queries.lt;/pgt;  lt;a href="#" class="btn btn-primary"gt;Enterlt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;```  

Ответ №1:

Не начинайте новую ссору. Сохраните одну строку и поместите в нее весь код столбца. Вывод будет состоять из 3 столбцов (x2) xl и станет 2 столбцами (x3) lg . Возможно, вам потребуется добавить пользовательское поле ко всем элементам в col зависимости от результатов, которые вы получаете.