用于 android 浏览器和旧版 safari 的 Css order 属性

Question

我正在使用 css order 属性：

#product_addtocart_form {display: flex; flex-direction: column;}
    #product_addtocart_form .product-img-box {order: 1;}
    #product_addtocart_form .product-shop {order: 2;}

我的问题是在 android 浏览器和旧版 safari 版本（iphone 4、4s）上不起作用。是否有旧版 safari 和 android 浏览器的 webkit css 代码？提前谢谢

Answer 1

使用Autoprefixer 输出：

#product_addtocart_form .product-img-box {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

#product_addtocart_form .product-shop {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

编辑 2

对于容器，前缀样式为：

#product_addtocart_form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}