Mobile Bootstrap col元素中的硬中断

我正在使用下面的代码，并试图确定是什么使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>

星期六

2月13日
TCU

角蛙
即将发售
家庭日-70美元