This property flex-flow
and this one display:flex;
doesn't work in Safari, mobile Opera, etc. I'm trying to find a problem for about a week and still got nothing.
My code looks this way:
.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;
}
}
<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>
Link to CodePen
Thank you beforehand.