<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>
<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>
