<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="about-us"> <div class="about-content"> <div class="img-content"> <img src="https://placeimg.com/1200/800/nature" alt=""> </div> <div class="text-block"> <h2 class="title">Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ratione officiis illum minus veritatis ipsa cupiditate, iste accusamus repellat voluptas doloribus fugiat, veniam tenetur obcaecati a odio exercitationem sequi expedita!</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, numquam. Accusantium, placeat possimus totam repellendus amet rem ducimus, consequuntur neque aperiam voluptates veniam alias blanditiis id. Nihil corrupti ut possimus! </p> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Oswald|Raleway'); .about-us { background: #f6f7f5; } .about-content { display: -ms-flexbox; display: flex; flex-direction: row; -ms-flex-direction: row; } .img-content { width: 50%; font-size: 0; line-height: 0; position: relative; letter-spacing: 0; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .img-content img { min-width: 100%; min-height: 100%; height: auto; object-fit: cover; width: 100%; } .text-block .title { max-width: 80%; font-family: 'Oswald', sans-serif; font-size: 3rem; color: #3b3b3b; margin-bottom: 20px; font-weight: bold; } .text-block p { margin-bottom: 40px; font-size: 18px; font-family: 'Raleway', sans-serif; } .text-block { padding: 80px 80px 60px 90px; display: -ms-flexbox; display: flex; flex-direction: column; width: 50%; padding: 50px 40px; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; -ms-flex-align: start; align-items: flex-start; } @media only screen and (max-width: 767px) { .about-content { flex-direction: column; -ms-flex-direction: column; } .img-content { width: 100%; } .text-block { width: 100%; } }