how to make a responsive accordion layout using bootstrap 3?

Question

How do i layout bootstrap grids if i want to make this responsive layout?

In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it.

When the window / viewed in smaller screen it will reduce the columns accordingly however it should preserve its functionality.

Desktop

Desktop http://i61.tinypic.com/9sf255.png

Tablets

Desktop http://i57.tinypic.com/v3ooiv.png

Mobile

Desktop http://i62.tinypic.com/1z738n7.png

Bootstrap layout

 <div class="row">

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

  <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>   

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

Answer 1

This can be accomplished with the collapse javascript functionality in Bootstrap. See http://getbootstrap.com/javascript/#collapse

You could use this code snippet to accomplish it.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  Simple collapsible </button>
 <div id="demo" class="collapse in">...</div>

And then try this:

  <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Button to toggle open and close</button></div>
   <div id="demo" class="collapse in col-md-12 what-content">...</div>

You will need to do the rest of the code, but this should get you started.