title: How do I conditionally align elements based on screen size?
body: <p>I have a fairly simple header on my site:</p>
  
  <pre><code>&lt;header&gt;
        &lt;nav class="navbar navbar-inverse" style=""&gt;
    &lt;div class="navContainer"&gt;
      &lt;div id="navbar"&gt;
          &lt;div id="leftNavSection"&gt;
          &lt;img alt="My Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png"&gt;        
          &lt;/div&gt;
          &lt;div id="rightNavSection"&gt;
          Logged in as Dave A
          &lt;a href="/users/edit"&gt;Edit&lt;/a&gt;
          &lt;a rel="nofollow" data-method="delete" href="/logout"&gt;Log Out&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>I align the logo to the left and the Logout links to the right:</p>
  
  <pre><code>#leftNavSection {
    float: left;
  }
  
  #rightNavSection {
    float: right;
  }
  </code></pre>
  
  <p>What I would like, however, is if the screen size is small (mobile browsers), for the <code>Log Out</code> links to appear aligned to the left beneath the logo.  </p>
  
  <p>However, when I change the “float:right” to “float:left” this doesn’t happen.  Here is my Fiddle — <a href="https://jsfiddle.net/kje3q74k/" rel="nofollow">https://jsfiddle.net/kje3q74k/</a>.  How do I pull this off?</p>