Flexbox заказ деталей в колонке

Question

Живой ссылки здесь http://soloveich.com/pr6/blog/

Попытки поставить дату с комментариями, и опубликовать предварительный просмотр в колонке на экране мобильного телефона. Кроме того, приведите дату с комментариями на первое место, когда на мобильном экране.

Weridly, она прекрасно работает на эмуляторах разрешении, но ничего не происходит на телефонах (iPhone'ов и старых СГС.)

Html

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

Плюс все, что внутренности

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; 
} 
} 

Не могу понять, если это мой css (зачем он работал в эмуляторе то?) или проблема с мобильными браузерами

Answer 1

Большинство мобильных браузеров поддерживают только старые свойства Flexbox 2009 года. Ваш код должен выглядеть следующим образом:

.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; 
    } 
} 

отметить также, что по умолчанию Flex-направление строки, поэтому нет необходимости указывать его, если вы не перезаписывать предыдущую установку Flex-направление.