I tried this way is that correct?  

  <section class="about ab">
            <div class="container c-container">
                <div class="row align-items-center">
                    
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 offset-lg-6">
                        <div class="about-details">
                            <h4>Our Mission</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                                diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                                aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                                nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                                aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                                in hendrerit.
                            </p>
                            <a href="">more about us</a>
                        </div>
                    </div>
                </div>
            </div>
        </section> 
    
    
    
    
       .ab {
        position: relative;
    }
    .ab::before {
        content: "";
        background: url('../images/our-mission.jpg') no-repeat;
        background-size: 100% 50%;
        height: 400px;
        width: 100%;
    }

is there any logic to do this by HTML CSS and bootstrap 4? I have tried to do this

here is the image :https://prnt.sc/vwbacq

The 100vw is showing me a full-width image and the content breaks down

<section class="about">
        <div class="container c-container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="about-img">
                        <img src="images/our-mission.jpg" class="img-fluid" alt="our-mission">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="about-details">
                        <h4>Lorem ipsum</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                            diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                            nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                            aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                            in hendrerit.
                        </p>
                        <a href="">more about us</a>
                    </div>
                </div>
            </div>
        </div>
    </section>