title: hidden-sm in bootstrap 3
body: <p>I'm trying to create a simple sidebar which will be hidden on small devices..</p>
  
  <p>But can't make it work.. <code>#sidebar</code> is either hidden or the <code>padding-left</code> on <code>#main</code> is set to <code>0</code></p>
  
  <pre><code>&lt;div id="sidebar" class="hidden-sm"&gt;sidebar&lt;/div&gt;
  &lt;div id="main"&gt;test&lt;/div&gt;
  
  @media (max-width:767px) {
      #main {
          padding-left:0;
      }
  }
  
  #sidebar {
      width:200px;
      float:left;
      background:red;
  }
  
  #main {
      padding-left:200px;
  }
  </code></pre>