Bootstrap，带有小型设备的flex-row

Question

我在bootstrap中遇到flex-row的奇怪问题。我正在使用以下css - 设置，从互联网上复制：

@media only screen and (min-width : 768px) {
   .flex-row.row {
     display: flex;
     flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
     display: flex;
     flex-direction: column;
   }
}

这非常有效。网格盒完美地位于彼此旁边，没有奇怪的休息。

有一天，我认出了设置min-width: 768px。由于我希望小型设备彼此相邻的网格框，我将其更改为0px。当我在笔记本电脑上最小化我的互联网浏览器（firefox和chrome）以模拟手机行为时，这非常有效。

现在的问题是：我用我的智能手机（Windows Phone上的一些IE）打开了网站，结构完全坏了。我使用了这些设置，但唯一可靠的方法是让手机的所有内容一个接一个（例如col-xs-12），然后切换回min-width: 768px。

这并不能让我满意。问题出在哪儿？或者它是我的设备的特定问题，因为它与我的笔记本电脑上最小化的互联网浏览器一起使用？