中心项目并使用flex对齐移动设备上的文本？

Question

我试图使用flex在685px以下的设备上居中。

我设法使用webkit集中（尽管我无法让它在Internet Explorer上工作），但我也希望文本是中心的并且左对齐。我弄错了我的问题。

 .row {
    display: flex;
    flex-flow: row wrap;
}
    /** On desktops, we'll align the elements in a row using flexbox **/
    @media (min-width: 652px) {
    .flex-item-top-footer {
    flex: 33.33% !important;
    text-align: -moz-center !important;
    text-align: -webkit-center !important;
    }
}

    @media (max-width: 651px)  {
    .flex-item-top-footer  {
    text-align: -moz-center !important;
    text-align: -webkit-center !important;
    flex: 100% !important;
}
}

https://jsfiddle.net/7a731k92/1/

有什么想法吗？