Flexbox不适用于移动浏览器

Question

此属性flex-flow和此display:flex;在Safari，移动Opera等中无效。我试图找到一个问题大约一周但仍然一无所获。 我的代码看起来像这样：

＆＃13;

＆＃13;

.contentleft,
.contentright {
  width: 200px;
  height: 400px;
  background: red;
}
.contentcenter {
  width: 400px;
  height: 400px;
  background: blue;
}
.contentleft,
.contentright,
.contentcenter {
  display: inline-block;
}
.right,
.left {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px auto;
}
@media (min-width: 481px) and (max-width: 640px) {
  .content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
  }
  .contentright {
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    order: 2;
    display: -webkit-flex;
    /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-flex;
    /* OLD: Firefox (buggy) */
    display: -ms-flex;
    /* MID: IE 10 */
    display: flex;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
  }
  .contentleft {
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3;
    order: 3;
    display: -webkit-flex;
    /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-flex;
    /* OLD: Firefox (buggy) */
    display: -ms-flex;
    /* MID: IE 10 */
    display: flex;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
  }
  .contentcenter {
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
  }
}

＆＃13;

<div class="content">
  <div class="contentleft">
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
  </div>
  <div class="contentcenter"></div>
  <div class="contentright">
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

链接到CodePen

事先谢谢你。