jquery - reorder the div vertically in small screen using twitter bootstrap -
on mobile template want position contact widget @ first inside sidebar. please check example. there way that
<div class="container-fluid"> <div class="col-md-9"> <p>main content goes here</p> </div> <div class="col-md-3"> <div class="sidebar-nav"> <ul class="nav"> <li><a href="#" title="">overview</a></li> <li><a href="#">mission , vision</a></li> <li><a href="#">directors</a></li> <li><a href="#">management</a></li> <li><a href="#">structure</a></li> </ul> </div> <div class="contact-widget"> <h3>contact address</h3> <p>some address go here</p> </div> </div> </div>
you can add 2 navigation instead of 1 , add show hide class based on media query. simple method desired result. markup follows
<div class="col-md-3"> <div class="sidebar-nav"> <ul class="nav hidemobile"> <li><a href="#" title="">overview</a></li> <li><a href="#">mission , vision</a></li> <li><a href="#">directors</a></li> <li><a href="#">management</a></li> <li><a href="#">structure</a></li> </ul> <div class="contact-widget"> <h3>contact address</h3> <p>some address go here</p> </div> <ul class="nav showmobile"> <li><a href="#" title="">overview</a></li> <li><a href="#">mission , vision</a></li> <li><a href="#">directors</a></li> <li><a href="#">management</a></li> <li><a href="#">structure</a></li> </ul> </div> </div>
Comments
Post a Comment