Bootstrap col元素中的硬断点

Question

我正在使用下面的代码并尝试确定cols堆叠在一起的原因。代码在桌面视图中看起来很好，但是当我在移动设备上查看它时，最后两个col-xs-12一起堆叠在一起。是否存在中断代码，以便在移动查看中在两个col之间进行强硬回报？

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