title: How can I change the float of an element when on mobile
body: <p>I have a navbar using the following code. On desktop, I want it to be side by side, however when on mobile I want it to look like a standard list, with each <code>li</code> below the previous. I want to just use 1 css file, with as few changes as possible between the two. How can I change the layout on differint devices just by using 1 css file?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;ul&gt;
          &lt;li class="navitem"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navitem"&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navitem"&gt;&lt;a href="resume.php"&gt;Resume&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navitem"&gt;&lt;a href="projects.php"&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navitem"&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- navbar --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/** Navbar Settings */
  div#navbar{
      width      : 90%;
      min-height : 25px;
      margin     : 0 auto;
  }
  
  div#navbar li{
      display          : inline;
      text-decoration  : none;
      float            : left;
  }
  
  div#navbar li.navitem{
      font-size        : 14pt;
      width            : 20%;
      text-align       : center;
  }
  
  li.navitem a:visited{
      color            : #9BC2EF; /* Darker Blue */
      text-decoration  : none;
  }
  </code></pre>
  
  <p>I already looked at <a href="https://stackoverflow.com/questions/10800447/layout-of-the-page-on-small-screens">Layout of the page on small screens</a>, and it doesn't really answer my question, because I want to avoid the use of media tags, because I have had issues with using them in the past.</p>