<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Tablet and MobileDevices--> <div class="visible-xs visible-sm"> <div class="row"> <div class="col-md-5"> <div class="panel panel-primary"> <div class="panel-heading" id="accordion"> <span class="glyphicon glyphicon-comment"></span> Profile <div class="btn-group pull-right"> <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#profile"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> <div class="panel-collapse collapse" id="profile"> <div class="panel-body"> <h1>Profile</h1> </div> <ul class="chat"> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>12 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"><span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>14 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"><span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> </div> <div class="panel-heading" id="accordion"> <span class="glyphicon glyphicon-comment"></span> Transaction History <div class="btn-group pull-right"> <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#history"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> <div class="panel-collapse collapse" id="history"> <div class="panel-body"> <h1>History</h1> </div> </div> </div> <div class="panel-heading" id="accordion"> <span class="glyphicon glyphicon-comment"></span> Credits <div class="btn-group pull-right"> <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#credits"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> <div class="panel-collapse collapse" id="credits"> <div class="panel-body"> <h1>Credits</h1> </div> </div> </div>