Html CSS列-缩小窗口宽度，然后将其展开，只显示一半的列数

我使用几个媒体查询来控制不同屏幕大小的列数。当页面加载时，效果非常好。然而，我注意到，当我将窗口的宽度缩小到几乎为零，然后再次将其扩展到全宽时，即使我已将

列数

指定为4，它也只显示2列，在右边2列的位置有一个空格。所有的内容都还在那里。就挤到左边去了。当我查看当前正在应用的css规则时，它仍然说

列计数

是4。我不知道发生了什么事。小费好吗？谢谢

我正在使用的相关CSS：

.reviews{
    width: 100%;
    padding: 1vw;
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

工作示例：

片段：

正文{
字体大小：16px；
保证金：0；
}
分区，表格{
框大小：边框框；
}
.顶栏{
颜色：白色；
背景：黑色；
保证金：自动；
文本对齐：左对齐；
左侧填充：10px；
垫面：5px；
垫底：10px；
/*边框底部：白色3px实心*/
}
.顶酒吧.牡蛎{
字体大小：40px；
}
.顶杆{
浮动：对；
}
李先生{
文字装饰：无；
显示：内联块；
}
.顶栏a{
文字装饰：无；
颜色：白色；
}
.顶杆ul li.项目{
字号：18px；
右边填充：20px；
}
.介绍{
边际上限：3vh；
字体大小：2vmax；
显示：块；
文本对齐：居中；
}
.当前{
文本对齐：居中；
字体大小：10vmax；
}
.评论{
宽度：100%；
填充物：1vw；
-webkit列数：4；/*Chrome、Safari、Opera*/
-moz列计数：4；/*Firefox*/
列数：4；
}
.回顾{
显示：内联块；
垫底：20px；
}
.问题{
颜色：棕色；
字体大小：1.3em；
}
.答复{
字号：1.8em；
}
@介质（最大宽度：797px）{
.评论{
宽度：100%；
填充物：1vw；
-webkit列数：2；/*Chrome、Safari、Opera*/
-moz列计数：2；/*Firefox*/
列数：2；
}
}
@介质（最小宽度：798px）和（最大宽度：1200px）{
.评论{
宽度：100%；
填充物：1vw；
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}
}
@介质（最小宽度：1201px）{
.评论{
宽度：100%；
填充物：1vw；
-webkit列数：4；/*Chrome、Safari、Opera*/
-moz列计数：4；/*Firefox*/
列数：4；
}
}

介绍本周的主题，
海洋
4安德鲁
你最喜欢的景点是什么？
悲哀的
你喜欢大海吗？
不是真的
你最喜欢的景点是什么？
睡觉
3安德鲁
你想住在那里吗？
青蛙
你最喜欢的景点是什么？
屁股
海洋的一些优势是什么？
没有一个
4安德鲁
你愿意死在海里吗？
不
你喜欢大海吗？
不
每年都有许多人淹死在海里。你觉得怎么样？
糟透了
4安德鲁
你上一次是什么时候；你去过海洋吗？
坦白说，我不记得了。
每年都有许多人淹死在海里。你觉得怎么样？
我当然觉得糟透了！这样一件小事怎么会发生在我们生活中如此重要的人身上？！我简直不敢相信！！
海洋的一些优势是什么？
可能没有。
3安德鲁
你会在海边唱歌吗？
不，先生！
你愿意死在海里吗？
当然不是，那是荒谬的！
你最喜欢的景点是什么？
我最喜欢的地方是在鲸鱼的肚子里'；她肚子痛。

在Firefox上运行良好。@ManojKumar嗯，是的，Firefox运行正常。我一直在使用Chrome来查看这个问题。不过我认为webkit可以解决Chrome的问题？这是媒体查询的设置方式。我重新排列了

@media

查询的顺序，似乎解决了问题。那我就不会太担心了。。。是的，在这种情况下，也许小小的javascript可以帮助可怜的Chrome。。。也许Chrome创作者会认为这是一个bug？