<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 ----------> <div class="container"> <div class="row"> <div class="col-12"> <h3 class="mb-3">Resize the page and see the magic.</h3> </div> </div> <div class="row"> <div class="col-12"> <div class="media border p-3 flex-column flex-md-row"> <img src="https://via.placeholder.com/100x100" alt="#" class="mr-3 rounded-circle" style="width:100px;"> <div class="media-body align-self-center"> <h4>My Name <small><i>Posted on May 20, 2018</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel ipsum aliquam metus facilisis scelerisque. Quisque vitae condimentum nulla. Vestibulum lobortis ullamcorper augue id consequat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at aliquet dui. Mauris dapibus lectus id laoreet iaculis. Duis auctor augue augue, eget lobortis quam auctor at.</p> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="media border p-3 flex-column flex-md-row"> <div class="media-body align-self-center"> <h4>My Name <small><i>Posted on May 20, 2018</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel ipsum aliquam metus facilisis scelerisque. Quisque vitae condimentum nulla. Vestibulum lobortis ullamcorper augue id consequat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at aliquet dui. Mauris dapibus lectus id laoreet iaculis. Duis auctor augue augue, eget lobortis quam auctor at.</p> </div> <img src="https://via.placeholder.com/100x100" alt="#" class="ml-3 rounded-circle" style="width:100px;"> </div> </div> </div> </div>

/*No need to add custom CSS when you have bootstrap - Yes*/