为什么我的图像在移动设备中显示不同？

Question

我正在显示3行图像。这是html：

   <div class="glass">
        <div class="image">
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
        </div>
    </div>

这是我的CSS：

.glass .image {
  margin-top: 75px;
}
.glass .image > div {
  display: flex;
}
.glass .image > div > img {
  border: 3px solid #4A4A4A;
  cursor: pointer;
  height: auto;
  margin: 5px 5px;
}

在桌面视图中，它们都是全宽的，我必须向左滚动才能看到所有图像。

在移动设备上，他们都被迫进入单页视图。您可以在不滚动的情况下查看所有图像。

我不知道这是否会改变，但我确实在html

的顶部

<meta name="viewport" content="width=device-width, initial-scale=1">

我做错了什么？如何在移动设备上水平滚动图像？