flexbox not working (ordering) on iOS

Question

I have an <ul> which has several list-items all containing an image. The <ul> displays horizontally on wider screens but on mobile I display the list-item's 2 by 2. Originally I did this with float:left; width: 50%; set on the list-item's which worked great. But as the images are logos and all different sizes it didn't look right, so I decided to use flexbox to reorder the list-item's so the image's were arranged different and looked neater. My CSS is below:

ul {
    overflow: hidden;
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21?28, Safari 6.1+ */
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

li {
    display: block; 
    margin: 0 0 @baseline/2 0;
    padding: 0;
    text-align: center;
    width: 50%;
}

li:nth-child(1) {order: 1;}
li:nth-child(2) {order: 2;}
li:nth-child(3) {order: 4;}
li:nth-child(4) {order: 3;}
li:nth-child(5) {order: 5;}
li:nth-child(6) {order: 6;}
li:nth-child(7) {order: 7;}

li:last-child {
    clear: left;
    float: none;
    margin: 0 auto;
}

I did have float:left; on the list-item's but I gather flexbox doesn't need this if flex-flow: row wrap is set ...or at least it shouldn't?

The above CSS works fine on my iMac in Chrome, Firefox and Opera. In Safari though and on IOS (Safari) the items are not reordered.

I thought this would work on latest browsers, especially webkit and iOS - can anyone shed some light on this?

This is how the logos should display when working correctly...

And this is how they display on Safari/iPhone - you can see the ordering is different (wrong - the order of the mark-up)...

Thanks, look forward to your response!

Answer 1

It's not working because you're missing the -webkit prefix on order, which is still required in all versions of Safari & iOS Safari that support flexbox. In regard to prefixes for other browsers, take a look a the support chart for flexbox on caniuse.

Update your code to:

li:nth-child(1) {order: 1; -webkit-order: 1;}
li:nth-child(2) {order: 2; -webkit-order: 2;}
li:nth-child(3) {order: 4; -webkit-order: 4;}
li:nth-child(4) {order: 3; -webkit-order: 3;}
li:nth-child(5) {order: 5; -webkit-order: 5;}
li:nth-child(6) {order: 6; -webkit-order: 6;}
li:nth-child(7) {order: 7; -webkit-order: 7;}