title: flexbox not working (ordering) on iOS
body: <p>I have an <code>&lt;ul&gt;</code> which has several list-items all containing an image. The <code>&lt;ul&gt;</code> displays horizontally on wider screens but on mobile I display the list-item's 2 by 2. Originally I did this with <code>float:left; width: 50%;</code> 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:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I did have <code>float:left;</code> on the list-item's but I gather flexbox doesn't need this if <code>flex-flow: row wrap</code> is set ...or at least it shouldn't?</p>
  
  <p>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.</p>
  
  <p>I thought this would work on latest browsers, especially webkit and iOS - can anyone shed some light on this?</p>
  
  <p>This is how the logos should display when working correctly...</p>
  
  <p><img src="https://i.stack.imgur.com/b8SXJ.png" alt="How the logos should display"></p>
  
  <p><em>And this is how they display on Safari/iPhone - you can see the ordering is different (wrong - the order of the mark-up)...</em></p>
  
  <p><img src="https://i.stack.imgur.com/HLFD4.png" alt="How they display on Safari/iOs"></p>
  
  <p>Thanks, look forward to your response!</p>