Css 根据屏幕大小将列从6更改为4到2

目前，我正在一个NSFW视频托管网站上使用Bootstrap 3.3.5 CSS。在首页上，如果屏幕尺寸的宽度为1200px或更大，则有12个视频显示在6列（共2列）中。当屏幕宽度低于768px时，这6列变为2列以更好地适应屏幕

我想添加的是CSS，如果屏幕小于1200px但大于768px，将显示4列

下面是一个视频链接，显示了如何根据屏幕大小改变一切：

本视频为NSFW

正如您所看到的，当屏幕变小时，缩略图会变小，但一直保持6列，直到大小小于768px时，缩略图会变为2列

---

我可以使用什么CSS在1200像素下切换到4列？

您可以使用CSS的@media属性，如下所示：

适用于宽度小于1200px的屏幕

@media only screen and (max-width: 1200px) {
    <do your stuff>
}

@仅媒体屏幕和（最大宽度：1200px）{
}

这将仅适用于宽度>768px的屏幕

@media only screen and (min-width: 768px) {
        <do your stuff>
}

@仅媒体屏幕和（最小宽度：768px）{
}

您可以使用css的@media属性，如下所示：

适用于宽度小于1200px的屏幕

@media only screen and (max-width: 1200px) {
    <do your stuff>
}

@仅媒体屏幕和（最大宽度：1200px）{
}

这将仅适用于宽度>768px的屏幕

@media only screen and (min-width: 768px) {
        <do your stuff>
}

@仅媒体屏幕和（最小宽度：768px）{
}