#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
зависимости от результатов, которые вы получаете.