css - Responsive, sortable Bootstrap thumbnails -

i'd format list of thumbnails using bootstrap 3 displayed in rows of 4 on large screens, 2 on smaller screens etc. also, need able drag , drop thumbnails change order.

so far tried markup

<ul class="thumbnails list-unstyled">  <li class="thumbnail-container">         <div class="thumbnail">             <img src="...">         </div>     </li> </ul> 

styled (less)

.thumbnails {     .row;     .clearfix;      .thumbnail-container {         .make-md-column(3);          &:nth-child(4n+1) {             clear: left;         }     } } 

i used clear because thumbnails not of equal height. tried implement sorting using jquery ui sortable , this script, both ended same - when sorting, rows of thumbnails break often, leaving gaps in grid.

can worked around somehow? know use masonry or isotope, seems huge overkill me. behaviour same in latest firefox , chrome.

use power of bootstrap. can this:

<div class="container">     <div id="#sortable" class="row">          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">             <a href="#" class="thumbnail">                 <img src="" alt="...">             </a>          </div>          ...      </div> </div> 

the magic happens because of "col-xs-12 col-sm-6 col-md-3 col-lg-3". tells on small devices thumb should take full width (12/12) of container; on small devices should take half width (6/12) , on medium , large screens take quarter (3/12) of width.

for more information: http://getbootstrap.com/css/#grid-media-queries

---

if want drag , drop thumbnails suggest use third party javascript achieve this. example can use "jquery ui sortable" this:

<script>     $(function() {         $( "#sortable" ).sortable();     }); </script> 

for more information refer to: http://jqueryui.com/sortable/