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
Tablets
Mobile
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>