title: How to make sidebar horizontal for xs devices
body: <p>I'm using the default CSS that came with bootstrap; also using the bootstrap theme and dashboard CSS.</p>
  
  <p>By default, when on xs devices, the sidebar disappears. Well, this is what i'm using for all my application's main navigation. So, I'd like for it to switch to a horizontal layout on such devices, but I can't find anything online about how to do this. </p>
  
  <p>I scoured the documentation, but it's pretty lousy IMO. There should be a breakdown of all the classes and their uses. I imagine there's a class i can add that will do what I want.</p>
  
  <p>Does anyone know it?</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-1 col-md-1 col-lg-1 overflow-fix"&gt;
        &lt;ul class="nav nav-sidebar"&gt;
          &lt;li class="icon-center"&gt;
            &lt;a href="/admin" &gt;&lt;i class="fa fa-tasks fa-2x" data-toggle="tooltip" data-placement="right" title="Recent Activity"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="icon-center"&gt;
            &lt;a href="/admin/users"&gt;&lt;i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="icon-center"&gt;
            &lt;a href="/admin/accounts"&gt;&lt;i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="icon-center"&gt;
            &lt;a href="/admin/branches"&gt;&lt;i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>