Packery with Bootstrap Grid

Question

I'm trying to use Packery to build a dashboard with draggable widgets (using Draggabilly for dragging). The widgets have their width determined by Bootstrap classes, as to be responsive over various screen sizes. I'm also using jQuery to grab elements and stuff.

CodePen Link

HTML Snippet

<div class='container'>
  <div class='row' id='dashboard-root'>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Some content</br></br>
    </div>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Some other content<br>
    </div>
    <div class='dashboard-item col-xs-12 col-sm-6 col-md-4 col-lg-3'>
      Even more content<br><br><br><br>
    </div>
    <div class='dashboard-item col-xs-12 col-sm-12 col-md-8 col-lg-6'>
    Some wide content is super wide, even wider than you even thought possible, like this is so crazy wide you wouldn't believe it.
    </div>
  </div>
</div>

CSS Snippet

.dashboard-item{
  border-style: solid ;
}

.container{
  border-style: dashed ;
}

JavaScript Snippet

var $root = $('#dashboard-root') ;

$root.packery({
  itemSelector: '.dashboard-item'
});

$root.find('.dashboard-item').each(function(i, itemElem){
  var draggie = new Draggabilly(itemElem) ;
  $root.packery('bindDraggabillyEvents', draggie);
});

As it stands, the widgets are draggable, but I need them to snap to some sort of grid. Currently, they can be placed anywhere, which makes positioning weird.

I'm trying to figure out how to make them snap to Bootstrap's grid columns. Ideally, I'd want the elements to snap to the nearest col-*-1, I think. Not sure what to do with the height though.

I tried playing with setting the columnWidth to a selector for a dummy element, but I couldn't get it to work.