title: how to show article directly on desktop but in accordion style on mobile?
body: <p>I am making a responsive webpage right now but I meet some trouble here...I made a collapse panel but I want it just shows on mobile and completely ditch it on the desktop. On desktop it should be just showed the title and content.
  should I use media query to reset the format or JavaScript?
  Thank you so much to help me!</p>
  
  <p>this is my code:</p>
  
  <pre><code>&lt;div class="container"&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="#collapse1" &gt;Collapsible Group 1&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapse1" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&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="#collapse2"&gt;Collapsible Group 2&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapse2" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&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="#collapse3"&gt;Collapsible Group 3&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapse3" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>