title: Reorder display order of a <ul>
body: <p>I have a <code>ul</code> with the following elements:</p>
  
  <pre><code>&lt;ul class="list-unstyled"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'd like to reorder the <strong>Home</strong> element and place it in the middle in certain situations.</p>
  
  <p>When viewing this in a smaller screen, the list will be rendered vertically, following the order specified in the markup.</p>
  
  <p>However, when viewing on a larger screen, the list will be horizontal, and <strong>Home</strong> will be in the middle (between <strong>Work</strong> and <strong>Contact</strong>).</p>
  
  <p>Is this possible to do purely in CSS? or will I need to use JS or JQuery to reorder the <code>&lt;li&gt;</code> elements?</p>