Мой столбец исчезает, когда экран становится средним в bootstrap

Question

Итак, я пытаюсь создать аналогичный дизайн, основанный на этом веб-сайте: https://www.rezydencjagubalowka.pl/en/ при представлении комнат, и у меня есть одна проблема, заключающаяся в том, что белые столбцы, которые я сделал (рядом с Lorem ipsum) ) исчезают всякий раз, когда я уменьшаю размер экрана. Здесь вы можете увидеть код:

<div class="pokaz">
         <div class="container">
            <div class="row pt-5">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

            </div>
            </div>
         </div>
         <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 bg-white">

                </div>
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
            </div>
         </div>
         <div class="container pb-5">
            <div class="row">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

               </div>
            </div>
         </div>
      </div>

Кто-нибудь хочет помочь? Я буду включать ссылку на код в комментариях

Answer 1

Хорошо, я нашел решение. Мне просто нужно было поставить

<div class="col-lg-6 p-0">
<img src="img/hotel-room.jpg" class="img-fluid" alt="Responsive image">
</div> 

с фотографией и «p-0» в имени класса col, чтобы фото выглядело чище

Answer 2

**remove class="col-lg-6 col-md-12 bg-white" marked ?? area .its empty. thats why it dissepears**

<div class="container">
   <div class="row">
      <div class="col-lg-6 col-md-12 bg-white">
            **??**
       </div>
       <div class="col-lg-6 bg-white" style="text-align: center;">
            <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
            </div>
         </div>
         <div class="container pb-5">
            <div class="row">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

               </div>
            </div>
         </div>
      </div>