<!-- Breakpoint Viewer -->
    <div class="container text-center">
        <div class="row">
            <div class="col-12 bg-primary hidden-sm-up">XS (0-575)</div>
            <div class="col-sm-12 bg-info hidden-xs-down hidden-md-up">SM (576-767)</div>
            <div class="col-md-12 bg-warning hidden-sm-down hidden-lg-up">MD (768-991)</div>
            <div class="col-lg-12 bg-danger hidden-md-down hidden-xl-up">LG (992-1199)</div>
            <div class="col-xl-12 bg-success hidden-lg-down">XL (1200-up)</div>
        </div>
    </div>