Html Flexbox在移动设备上未从行切换到列

我正试图让Flexbox在移动设备上工作，特别是iPhone 5。我的目标是在更大的屏幕上，如iPad和电脑显示器上，以及在移动设备上的一列中，让3个项目横跨整个页面。我使用了用户Cimmanon：生成的代码，以尽可能接近。我是一名经验丰富的开发人员（主要从事数据库工作），但对Web开发来说是一名相对新手，我对自己缺乏成功感到沮丧

我正在使用Dreamweaver CC进行编码。当我使用下面的CSS时，我的页面显示为我认为应该的样子，当我在Chrome、IE和Firefox中上传和测试时，我得到了我期望的结果：当浏览器窗口较宽时，显示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;
  }  
}

---

除了在许多博客上写的内容外，像iOS这样的移动操作系统还不支持flex方向：

---

您是否也在使用视口标记（位于head元素内部）

还应提及IE Mobile支持ms前缀，而不是viewport标记。我希望当我在云层上发射Cimmanon蝙蝠信号时，你能看到它并接听电话。我已经在你的第一条评论中添加了一行代码，现在一切都好了。它现在可以在我的iPhone5上使用Safari和Chrome。但是，我没有MS移动设备要测试。我在CSS

@-ms viewport{width:device width；}

@-o-viewport{width:device width；}

@-viewport{width:device width；}Opera的新CSS代码正在正确测试。非常感谢你，西曼农！您的可能副本不正确。自Safari 3.0和iOS 1.0以来，每个webkit-box/-webkit-flexbox/Flex规范都支持Flex方向。它写在你发布的实际链接中。