title: make div collapsible when screen size changes with collapse plugin - Bootstrap
body: <p>I have this code:</p>
  
  <pre><code>&lt;input value="+" class="btn btn_continents" type="button" data-toggle="collapse"
                                                 data-target="#collapseContinents" aria-expanded="false" aria-controls="collapseContinents" /&gt; 
  &lt;div id="collapseContinents" class="collapse in" &gt;
  Content...                                                                                   
  &lt;/div&gt;
  </code></pre>
  
  <p>And it is working ok, if someone click on the button the content shows and hides, but the problem comes when I want the collapsible content hides by default when the screen size is smaller</p>
  
  <pre><code>#collapseContinents{
       //display: block; 
      .show();
      @media screen and (max-width :@screen-xs-max) {  .
          //display:none;        
          .hidden();           
      }
  
  }
  </code></pre>
  
  <p>When I add that css(I am using less) and the screen is smaller the collapsive plugin doesn't  work anymore. What can I do?. Thank you.</p>