title: Making a <ul> list responsive - last <li> not floating left
body: <p>I am trying to make an unordered list responsive by changing the status of floats depending on screen size.  </p>
  
  <p>I start with all li's floating to left.  At 520px I want the third li only to not float, so I apply float:none to that one.  However, this causes the fourth li to no longer float, and simply adding a float:left to the fourth li has not effect.</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
  
  ul {list-style-type:none;}
  ul li {width:100px;float:left;}
  @media screen and (max-width:520px) {
      ul li#three {float:none;}
      ul li#four {float:left;}
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;ul&gt;
      &lt;li id = "one"&gt; Menu One &lt;/li&gt;
      &lt;li id = "two"&gt; Menu Two &lt;/li&gt;
      &lt;li id = "three"&gt; Menu Three &lt;/li&gt;
      &lt;li id = "four"&gt; Menu Four &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>