title: how to make a responsive accordion layout using bootstrap 3?
body: <p>How do i layout bootstrap grids if i want to make this responsive layout?</p>
  
  <p>In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it.</p>
  
  <p>When the window / viewed in smaller screen it will reduce the columns accordingly however it should preserve its functionality. </p>
  
  <h2>Desktop</h2>
  
  <p><a href="https://i.stack.imgur.com/2DPFE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2DPFE.png" alt="Desktop"></a>
  </p>
  
  <h2>Tablets</h2>
  
  <p><a href="https://i.stack.imgur.com/I5KVx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I5KVx.png" alt="Desktop"></a>
  </p>
  
  <h2>Mobile</h2>
  
  <p><a href="https://i.stack.imgur.com/xt72w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xt72w.png" alt="Desktop"></a>
  </p>
  
  <h1>Bootstrap layout</h1>
  
  <pre><code> &lt;div class="row"&gt;
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;                
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;     
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;                
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;     
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;  
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#" class="double-line"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;   
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;     
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#" class="double-line"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;  
  
        &lt;div class="col-md-3 col-sm-6 col-xs-12 what-tab"&gt;
          &lt;a href="#"&gt;TAB NAME&lt;/a&gt;
          &lt;div class="col-md-12 what-content"&gt;TAB CONTENT&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>