title: Responsive, sortable Bootstrap thumbnails
body: <p>I'd like to format a list of thumbnails using Bootstrap 3 so that they are displayed in rows of 4 on large screens, 2 on smaller screens etc. Also, I need to be able to drag and drop the thumbnails to change their order.</p>
  
  <p>So far I tried this markup</p>
  
  <pre><code>&lt;ul class="thumbnails list-unstyled"&gt;
   &lt;li class="thumbnail-container"&gt;
          &lt;div class="thumbnail"&gt;
              &lt;img src="..."&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>styled up like this (LESS)</p>
  
  <pre><code>.thumbnails {
      .row;
      .clearfix;
  
      .thumbnail-container {
          .make-md-column(3);
  
          &amp;:nth-child(4n+1) {
              clear: left;
          }
      }
  }
  </code></pre>
  
  <p>I used the <code>clear</code> because the thumbnails are not of equal height.
  I tried to implement sorting using jQuery UI Sortable and <a href="https://github.com/voidberg/html5sortable" rel="nofollow">this script</a>, but both ended up the same - when sorting, the rows of thumbnails would break too often, leaving gaps in the grid. </p>
  
  <p>Can this be worked around somehow? I know I could use something like Masonry or Isotope, but it seems a huge overkill for me. The behaviour is the same in latest Firefox and Chrome. </p>