<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="row border border-default"> <div class="bg-primary text-center p-2 col-md-12"> <p class="lead text-white">TITLE GOES HERE</p> </div> <div class="text-center p-2 col-md-12 text-white bg-primary border-top"> <p>[includes-short]</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-none d-sm-block"> <p>GATEWAY</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-block d-sm-none small"> <p>GATE</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-none d-sm-block"> <p>INSIDE</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-block d-sm-none small"> <p>INS</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-none d-sm-block"> <p>BALCONY</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-block d-sm-none small"> <p>BAL</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-none d-sm-block"> <p>MINI-SUITE</p> </div> <div class="bg-secondary text-white p-2 mb-3 col-3 text-center d-block d-sm-none small"> <p>SUI</p> </div> <div class="py-2 col-3 text-center d-none d-sm-block small"> <p>price from</p> </div> <div class="py-2 col-3 text-center d-block d-sm-none small"> <p>from</p> </div> <div class="py-2 odd col-3 text-center"> <del>$X,XXX</del> </div> <div class="py-2even col-3 text-center"> <del>$X,XXX</del> </div> <div class="py-2 odd col-3 text-center"> <del>$X,XXX</del> </div> <div class="py-2 col-3 text-center d-none d-sm-block gateway"> <p>Vancouver</p> </div> <div class="py-2 col-3 text-center d-block d-sm-none"> <p>YVR</p> </div> <div class="py-2 odd col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-2 even col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-2 odd col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-2 col-3 text-center d-none d-sm-block gateway"> <p>Toronto</p> </div> <div class="py-2 col-3 text-center d-block d-sm-none"> <p>YYZ</p> </div> <div class="py-2 odd col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-2 even col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-2 odd col-3 text-center"> <p class="mark text-danger lead font-weight-bold">$X,XXX</p> </div> <div class="py-3 col-3 text-center d-none d-sm-block"> <p>savings<br> <small>per couple</small></p> </div> <div class="py-3 col-3 text-center d-block d-sm-none small"> <p>savings<br> <small>per couple</small></p> </div> <div class="py-3 odd col-3 text-center"> <p class="text-secondary">$X,XXX</p> </div> <div class="py-3 even col-3 text-center"> <p class="text-secondary">$X,XXX</p> </div> <div class="py-3 odd col-3 text-center"> <p class="text-secondary">$X,XXX</p> </div> <div class="text-center border py-4 col-md text-secondary"> <p>[disclaimer-short]</p> </div> </div>