Flexbox无法在移动设备上从行切换到列

Question

我试图让Flexbox在移动设备上工作，特别是iPhone 5.我的目标是在iPad和计算机显示器等大屏幕上跨越页面上的3项内容并在移动设备上的列中。我使用用户Cimmanon生成的代码：3 Column Responsive CSS (Ordering Contents Positions)以尽可能地接近我。我是一个经验丰富的开发人员（主要是数据库工作），但是对于Web开发人员来说，这是一位相对新手，并且因为缺乏成功感到沮丧。

我正在使用Dreamweaver CC进行编码。当我使用下面的CSS时，我的页面出现，因为我认为它应该，当我在Chrome，IE和Firefox上传和测试时，我得到结果I期望：当浏览器窗口很宽时，有3个项目，而窗口很窄时有3个项目。但是，当我使用我的iPhone时，当我想获得的是列时，我继续获得3行的行。

我现在已经花了很多时间在此，并会感谢任何帮助任何人可以传递。提前致谢。

/*** FLEXBOX ***************************************/ 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding-top:50px; 
    margin: 0px; 
} 

.a { 
    background-color: #fff; 
    text-align: center; 
    padding-top: 20px; 
} 

.b { 
    background-color: #fff; 
    text-align:center; 
    padding-top:20px; 
} 

.c { 
    background-color: #fff; 
    text-align:center; 
    padding-top:20px; 

} 

/* GRID OF THREE   ============================================================================= */ 
@media only screen and (min-width: 640px) { 
    .span_3_of_3 { 
    width: 100%; 
    } 

    .span_2_of_3 { 
    width: 66.1%; 
    } 

    .span_1_of_3 { 
    width: 32.2%; 
    } 

    /* COLUMN SETUP */ 
    .col { 
    display: block; 
    float: left; 
    margin: 1% 0 1% 1.6%; 
    } 

    .col:first-child { 
    margin-left: 0; 
    } 
} 
@media only screen and (max-width: 640px) { 


    .section { 

    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; /* fix for Firefox */ 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
-webkit-box-direction: normal; 
-moz-box-direction: normal; 
-webkit-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: column; 
text-align: center; 
left: 0px; 
right: 0px; 
padding-left: 0px; 
    } 

    .a { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -webkit-flex-order: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
    } 

    .b { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -webkit-flex-order: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
    } 

    .c { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3; 
    -webkit-flex-order: 3; 
    -ms-flex-order: 3; 
    -webkit-order: 3; 
    order: 3; 
    } 
} 

Answer 1

其他然后写在许多博客，喜欢的iOS mubile奥赛斯不支持Flex方向尚未：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html