<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" style="background-image: url(https://sylvanianfamilies.co.uk/skin/frontend/default/mobileshoppe/images/back-bg.jpg); background-position: center;"> <div class="row"> <span><img src="https://sylvanianfamilies.co.uk/skin/frontend/default/mobileshoppe/images/logo.png" style="width:100%;"></span> </div> <div class="row" style="height:20px;"></div> <div class="row"> <div class="col-md-5 col-sm-6"> <img src="https://cdn2.sylvanianfamilies.com/common/images/top/pc_17_cal_top.jpg" class="rounded-circle img-fluid" /> </div> <div class="col-md-7 col-sm-6">Test</div> </div> <div class="row" style="height:50px;"></div> <div class="row"> <div class="col-md-7 col-sm-6 col-sm-push-6">Test</div> <div class="col-md-5 col-sm-6 col-sm-pull-6"> <img src="https://cdn2.sylvanianfamilies.com/common/images/top/pc_17_cal_mar.jpg" class="rounded-circle img-fluid" /> </div> </div> <div class="row" style="height:50px;"></div> <div class="row"> <div class="col-md-5 col-sm-6"> <img src="https://cdn2.sylvanianfamilies.com/common/images/top/pc_18_cal_apr.jpg" class="rounded-circle img-fluid" /> </div> <div class="col-md-7 col-sm-6">Test</div> </div> <div class="row" style="height:100px;"></div> </div>