Я хочу сделать наполовину изображение карусели наполовину, а когда я добавлю netx, поменяю картинку и текст

Question

Я хочу сделать так на картинке

Вот подсказка моего кода. введите код здесь

Кто-нибудь знает, как я могу сделать, как на картинке? Я так хочу этого

                      <div class="py-5 bg-light" id="venue" >
                          <div class="container">
                              <div class="row bg-dark p-4">

                                <div class="p-0 col-md-6">
                                    <div class="carousel slide" data-ride="carousel" id="carousel1">
                                        <div class="carousel-inner" role="listbox">

                                            <div class="carousel-item active">
                                              <img class="d-block img-fluid w-100" src="assets/restaurant/venue_1_light.jpg" atl="first slide">
                                           </div>

                                            <div class="carousel-item">
                                              <img class="d-block img-fluid w-100" src="assets/restaurant/venue_3_light.jpg" data-holder-rendered="true">
                                             </div>

                                            <div class="carousel-item">
                                              <img class="d-block img-fluid w-100" src="assets/restaurant/venue_2_light.jpg" data-holder-rendered="true"> 
                                            </div>

                                            <div class="carousel-item">
                                              <img class="d-block img-fluid w-100" src="assets/restaurant/venue_4_light.jpg" data-holder-rendered="true">
                                             </div>

                                        </div>
                                          <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                          </a>
                                          <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                          </a>
                                      </div>
                                </div>

                                <div class="p-4 col-md-6 bg-light">
                                    <p class="m-0">Feel comfortable, like home</p>
                                    <h2>Discover the venue</h2>
                                    <p class="my-4">Design and architecture go together with good food. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br>
                                      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> </p>
                                    <a href="#" class="btn p-2 btn-outline-secondary">View the gallery</a>
                                </div>

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

Это для работы. Так что, если кто-то может ответить как можно скорее, я буду очень благодарен!