title: Changing default state of accordion collapse panel with screen size
body: <p>I have an <code>accordion</code></p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;FAQ&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
          &lt;div class="panel-body"&gt;       
                ...          
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want the <code>accordion</code> default to be expanded on a desktop browser but collapsed on a mobile browser. I've tried changing <code>&lt;div id="collapseOne" class="panel-collapse collapse in"&gt;</code> to <code>&lt;div id="collapseOne" class="panel-collapse collapse var"&gt;</code> and having the following in my <code>.css</code>:</p>
  
  <pre><code>@media(max-width:767px) {
      .collapse.var{
          display:none;
      }
      .collapse.in.var{
          display:block;
      }
  }
  
  @media(min-width:768px) {
      .collapse.var{
          display:block;
      }
      .collapse.in.var{
          display:none;
      }
  }
  </code></pre>
  
  <p>But the desktop version is bugged and the content is displayed even when the panel is gone. Any help would be appreciated!</p>