Bootstrap Masonry Panels I

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.0.0/packery.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.1.0/draggabilly.pkgd.min.js"></script>
<div class="container-fliud">
  <div class="row">
    <div class="grid">

      <div class="col-sm-4 grid-item">

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel 1</h3>
          </div>
          <div class="panel-body">
            Panel content Panel content Panel content Panel content Panel content Panel content Panel content Panel content Panel content Panel content
          </div>
        </div>

      </div>

      <div class="col-sm-4 grid-item">

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel 2</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>

      </div>

      <div class="col-sm-4 grid-item">

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel 3</h3>
          </div>
          <div class="panel-body">
            Panel content Panel content Panel content Panel content Panel content Panel content
          </div>
        </div>

      </div>

      <div class="col-sm-4 grid-item">

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel 4</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>

      </div>

      <div class="col-sm-4 grid-item">

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Panel 5</h3>
          </div>
          <div class="panel-body">
            Panel content...

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
}

.grid-item:hover {
  cursor: all-scroll;
}

@media (max-width: 767px) {
  .grid-item {
    padding: 5px 10px;
    width: 100%;
  }
}

.packery-drop-placeholder {
  outline: 1px dashed #f00;
  outline-offset: -6px;
  /* transition position changing */
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

JavaScript

// initialize Packery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

// make all grid-items draggable
$grid.find('.grid-item').each(function(i, gridItem) {
  var draggie = new Draggabilly(gridItem);
  // bind drag events to Packery
  $grid.packery('bindDraggabillyEvents', draggie);
});