为何将Grid容器改为Flex布局后，媒体查询设置不生效？

我正在完成一个基于Grid容器的挑战项目，容器包含3张卡片，默认以水平方式排列。

问题详情 #

我给容器定义了.grid-container类，CSS属性如下：

display: grid;
grid-template-columns: repeat(3, 1fr);

为适配小屏幕，我编写了如下媒体查询：

@media only screen and (min-width: 320px) and (max-width: 900px) {
  .grid-container {
    display: flex;
    flex-direction: column;
  }
}

按照上述代码逻辑，我希望在屏幕宽度处于320px到900px区间时，将Grid布局切换为Flex列布局，但调整屏幕分辨率后该设置并未生效。

内容的提问来源于stack exchange，提问作者TheMax370