Flexbox items order in column

Question

Live link here http://soloveich.com/pr6/blog/

Trying to put date with comments number and post preview in column on mobile screen. Also, bring the date with comments to first place when on mobile screen.

Weridly, it works perfectly on resolution emulators, but nothing happens on phones (iphones and old sgs.)

Html

<div class="postpreview">       
<div class="psto"></div> 
<div class="datencomments"></div>
</div>

Plus whatever insides

css

.postpreview {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-direction:row;
-webkit-flex-direction:row;
-moz-direction:row;
}

.psto {
 flex:5;
 -webkit-flex:5;
-moz-flex:5;
}

 .datencomments {
flex:2;
-webkit-flex:2;
-moz-flex:2;
vertical-align: top !important;
margin-top: 15px;
}

@media screen and (max-width: 380px) {
.postpreview {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-direction:column;
-webkit-flex-direction:column;
-moz-direction:column;
}
}

Can't figure out if it's my css (why would it work in emulator then?) or problem with mobile browsers

Answer 1

The majority of mobile browsers only support the old 2009 Flexbox properties. Your code should look like this:

.postpreview {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.psto {
  -webkit-box-flex: 5;
  -moz-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
}

.datencomments {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  vertical-align: top !important;
  margin-top: 15px;
}

@media screen and (max-width: 380px) {
  .postpreview {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -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;
  }
}

Also note that the default flex-direction is row, so there's no need to specify it unless you're overwriting a previous flex-direction setting.