mobile - Hard Breaks in Bootstrap col Elements

Question

I am working with the code below and trying to determine what makes the cols stack on one another. The code looks fine in desktop view, but when I look at it on mobile, the last two col-xs-12 stack together right on top of one another. Is there a break code to make it put a hard return between the two col's in mobile viewing?

<div class="panel panel-default">
    <div class="panel-body2">
        <div class="row vertical-align">
            <div class="col-xs-6 col-sm-3">
                <h5><small>Saturday<br>
                  </small>Feb. 13</h5>
            </div>
            <div class="col-xs-6 col-sm-3 text-right">
                <h5><small>TCU<br>
                  </small>Horned Frogs</h5>
            </div>
            <div class="hidden-xs col-sm-3 text-left">
                <img src="http://www.wvusports.com/content/images/graphics/logos/TCU.png" width="45">
            </div>
            <div class="col-xs-12 col-sm-3 text-center">
                <span class="label label-warning"><i class="fa fa-ticket"></i> ON SALE SOON</span>
                <div>
                    <img class="hidden-xs" style="padding-top:2px" src="http://www.wvusports.com/content/images/graphics/logos/Big12.png" width="25">
                </div>
            </div>
            <div class="col-xs-12">
            <div class="alert alert-success" role="alert">Family Day - $70</div>
            </div>
        </div>
    </div>
</div>