Html 为什么我的flexbox布局在移动浏览器上不能正常工作？

我有一个简单的css flexbox布局。我写了两个媒体查询，当

minwidth

为750px时，将最下面的包装布局设置为列。它在桌面浏览器上工作得很好，但当我在chrome开发者工具设备部分或物理设备上显示我的布局时，最底层的包装器并没有像我预期的那样工作

样式文件：

桌面：

@media (min-width:750px) {
html{
    font-family: 'Raleway', sans-serif;
    background-color: #E74C3C;
}

body{
    color: #ecf0f1;
    margin:0;
}
.alican_img{
    width: 300px;
    height: 300px;
    background-size: 100%;
    border-radius: 150px;
    border-radius: 150px;
    background: url(../img/alican_resim.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 5px 0;
}

.bodydiv{
    display: flex;
    flex-flow: column;
}

.alican_img{
    align-self: center;
}

.img_alt_yazi{
    font-size: 100px;
    background-color:#b83c30 ;
    text-align: center;
}

.img_alt_banners{
    background-color: #A1362A;
    font-size:20px;
    text-align: center;
    margin: 3px 0;
    padding: 20px 50px;
}

.social{
    width: 100%;
    background-color: #8a2d24;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}


.social img{
    width: 110px;
    height: 110px;
    padding: 15px 50px;
}
.powered    {
    display: none;
}

}

流动电话：

@media (max-width: 750px) {


html{
    font-family: 'Raleway', sans-serif;
    background-color: #E74C3C;
}

body{
    color: #ecf0f1;
    margin:0;

}
.alican_img {
    width: 300px;
    height: 300px;
    background-size: 100%;
    border-radius: 150px;
    border-radius: 150px;
    background: url(../img/alican_resim.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 5px 0;
}

.bodydiv{
    display: flex;
    flex-flow: column;
}

.alican_img{
   align-self: center;
}

.img_alt_yazi{
    font-size: 100px;
    background-color:#b83c30 ;
    text-align: center;
}

.img_alt_banners{
    background-color: #A1362A;
    font-size:20px;
    text-align: center;
    margin: 3px 0;
    padding: 20px 50px;
}

.social{
    background-color: #8a2d24;
    display: -webkit-flex;

    -webkit-flex-flow: column;
    -webkit-align-items: center;
}
.social img{
    width: 110px;
    height: 110px;
    padding: 10px 0;
}
.powered    {
    display: none;
}

}

这张图片是预期的行为。社交内容的包装器的作用类似于列

在这里，它的作用与750px的更宽宽度上预期的行类似：

但当我在移动浏览器中打开布局时，它的行为与预期的一样

我希望社会事物的布局必须是第一张图片

谢谢大家

---

JSFIDLE，但无法设置样式：

这里是一个专门针对iphone 6的媒体查询。也许这会让你的问题消失

@media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

---

请张贴HTML。另外，一个实时演示（例如jsfiddle.net）也会很有帮助。jsfiddle虽然不能使用小提琴演示中的HTML和问题中发布的CSS设置样式，但布局似乎可以按照您的要求工作：不，没有，您能看到我添加到问题中的最后一个屏幕截图吗？当我在iphone 6移动浏览器上打开布局时，它看起来就像屏幕截图上的一样。社交物品的布局必须像列而不是行……旁注，你正在使用一种非常有趣的方式来组织样式，通常我们先做移动或桌面，但不分别做两组。毫无帮助：（最小宽度和最大宽度都为750可能有问题。我通常看到的是0-399和400-499等