我正在尝试有12列，在大屏幕上每个占1列，在小屏幕上每个占4列。但是，当我尝试将其最小化时，什么也没发生，它们只是被推到另一个之下。我希望在小屏幕上连续显示三列，但这并没有发生，我想知道我在这里做错了什么。您能在不增加负面声誉的情况下帮助我吗？ 谢谢！

代码如下：

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
  </div>
</div>