title: Bootstrap panel: collapsed on mobile but expanded on desktop, how?
body: <p>How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.</p>
  
  <pre><code>&lt;div class="panel-group"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div class="col-xs-10"&gt;
                  &lt;h4 class="panel-title"&gt;Login&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-2 text-right"&gt;
                  &lt;a data-toggle="collapse" href="#panel-login"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="panel-login" class="panel-collapse collapse in"&gt;
  
          &lt;div class="panel-body"&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="&lt;?=$php_self?&gt;?page=login&amp;view=signup"&gt;Create account&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;?=$php_self?&gt;?page=login&amp;view=reset_password"&gt;Reset password&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="&lt;?=$php_self?&gt;?page=login&amp;view=reactivate_account"&gt;Reactivate account&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;&lt;!-- end panel-body --&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end panel-default --&gt;
  </code></pre>
  
  <p></p>