title: desktop nav bar sticky top to mobile nav bar sticky bottom
body: <p>I'm using <a href="http://getskeleton.com" rel="nofollow">Skeleton</a> as my CSS framework</p>
  
  <p>Currently I have a nav bar that sticks to the top in PC desktop view (i.e., the page scrolls under it). Here's the code:</p>
  
  <pre><code>&lt;div style="height:50px"&gt;
   &lt;div id="fixed-nav-bar"&gt;
    &lt;div class="container" id="nav"&gt;
  
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  #fixed-nav-bar {
        position:fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 50px;
        background-color:linen;
    }
  
  #nav ul {
      display: -moz-box;
      display: -webkit-box;
      display: box;
      list-style-type: none;
      text-align: center;
    }
  
  #nav ul li {
      -moz-box-flex: 1;
      -webkit-box-flex: 1;
      box-flex: 1;
    }
  </code></pre>
  
  <p>My Question: How can I make it so that when viewing it in a mobile device (i.e. a phone), the nav bar moves to the bottom (to be easily usable in one-handed mode) and stays sticky?</p>
  
  <p>I'm guessing I need to use media queries. How can I use them here?</p>