Javascript 响应网格仅在一行中

我已经使用bootstrap有一段时间了，但是我无法理解这一点

所以，我有一行4列，这一次的反应是，当我不断缩小屏幕尺寸时，我想去掉不合适的元素。这意味着我开始一个接一个地显示4个图像，以后如果屏幕更小，我只想显示前3个，最后可能只显示1个

是否可以用CSS实现这一点，或者我需要一些Javascript

---

我希望我解释得足够清楚。

要完全隐藏或显示显示器大小，请使用：

可见xs-*

，

可见sm-*

，

可见md-*

，

可见lg-*

，

隐藏xs

，

隐藏sm

，

隐藏md

，

隐藏lg

*

对应于

块

、

内联块

和

内联块

，具体取决于所需内容

<div class="row">
    <div>
        1
    </div>
    <div class="hide-xs show-sm-block">
        2
    </div>
    <div class="hide-xs show-sm-block">
        3
    </div>
    <div class="hide-sm show-md-block">
        4
    </div>
    <div class="clearfix"></div>
</div>

1.
2.
3.
4.

如果你想让div4在小屏幕上消失，你可以简单地在小屏幕上隐藏它

1.
2.
3.
4.

---

谢谢，我知道bootstrap是如何工作的，接下来的事情是，一旦我们到达col cm，div 4将进入下一行。我要第四组去解围，而不是去下一行

<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
    1
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
    2
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
    3
</div>
<div class="col-xs-12 col-md-3 hidden-sm">
    4
</div>