title: Drag and drop sortable bootstrap grid organization chart
body: <p>I have made an organization chart using bootstrap's grids and jquery ui for the drag and drop sortable grid functionality. What I want to achieve is to swap each items position using drag and drop sortable. My problem is I can't seem to make it work and the layout is messing up. Here's what I tried so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container noah-family-tree-container"&gt;
    &lt;div class="row noah-family-header"&gt;
      &lt;div class="col-md-12"&gt; 
        &lt;p&gt; MY NOAH FAMILY &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="underline"&gt; &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row noah-family-tree grid"&gt;
        &lt;div class="tree-head img-tree grow push"&gt;
          &lt;a href="#" class="button tree-parent "&gt; 
              &lt;img src="images/female-img.png" class="img-responsive"&gt; 
              &lt;p&gt;Goldilocks&lt;/p&gt; 
         &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="child-content"&gt;
      &lt;div class="row"&gt;
        &lt;div class="tree-line-vertical"&gt;&lt;/div&gt;
        &lt;div class="tree-line-horizontal"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row tree-row tree-child"&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push"&gt;
            &lt;a href="#" class="button tree-child1 "&gt; 
              &lt;img src="images/bear-img.png" class="img-responsive"&gt;
              &lt;p&gt;Papa Bear&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push"&gt;
            &lt;a href="#" class="button tree-child2 "&gt; &lt;img src="images/bear-img.png" class="img-responsive"&gt; 
              &lt;p&gt;Mama Bear&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree grow push"&gt;
            &lt;a href="#" class="button tree-child3 "&gt; &lt;img src="images/bear-img.png" class="img-responsive"&gt; 
              &lt;p&gt;Baby Bear&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div id="grandchild-content1"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 family-tree-line"&gt;
          &lt;div class="tree-line-vertical"&gt;&lt;/div&gt;&lt;div class="tree-line-horizontal2"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree"&gt;  &lt;/div&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree"&gt;  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
          &lt;a href="#" class="button "&gt;  &lt;img src="images/bear-img.png" class="img-responsive"&gt;
            &lt;p&gt;Harold Honey&lt;/p&gt; 
          &lt;/a&gt;
        &lt;/div&gt;
          &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
          &lt;a href="#" class="button "&gt; &lt;img src="images/bear-img.png" class="img-responsive"&gt;
            &lt;p&gt;Patrick Porriage&lt;/p&gt; 
          &lt;/a&gt;
        &lt;/div&gt;
          &lt;div class="col-md-6 col-sm-6 col-xs-6 img-tree grow push"&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="grandchild-content2"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12 img-tree"&gt; 
          &lt;div class="tree-line-vertical"&gt;&lt;/div&gt;
          &lt;div class="tree-line-horizontal2-2"&gt;&lt;/div&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt; &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
          &lt;a href="#" class="button "&gt;  
              &lt;img src="images/bear-img.png" class="img-responsive"&gt;
              &lt;p&gt;Harold Honey&lt;/p&gt; 
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
          &lt;a href="#" class="button "&gt; 
              &lt;img src="images/bear-img.png" class="img-responsive"&gt;
              &lt;p&gt;Patrick Porriage&lt;/p&gt; 
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="grandchild-content3"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 family-tree-line"&gt; &lt;/div&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree"&gt; &lt;/div&gt;
        &lt;div class="col-md-4 col-sm-4 col-xs-4 img-tree content3-line"&gt;
          &lt;div class="tree-line-vertical"&gt;&lt;/div&gt;&lt;div class="tree-line-horizontal2"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-6 col-sm-6 col-xs-6 img-tree grow  push"&gt; &lt;/div&gt;
        &lt;li&gt;
          &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
            &lt;a href="#" class="button "&gt;
              &lt;img src="images/bear-img.png" class="img-responsive"&gt;
              &lt;p&gt;Harold Honey&lt;/p&gt; 
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;div class="col-md-3 col-sm-3 col-xs-3 img-tree grow push"&gt;
          &lt;a href="#" class="button "&gt; 
              &lt;img src="images/bear-img.png" class="img-responsive"&gt;
              &lt;p&gt;Patrick Porriage&lt;/p&gt; 
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  </code></pre>
  
  <p></p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(function () {
      $(".grid").sortable({
          tolerance: 'pointer',
          revert: 'invalid',
          placeholder: 'span2 well placeholder tile',
          forceHelperSize: true
      });
  });
  </code></pre>
  
  <p><strong>SCREENSHOT</strong></p>
  
  <p><img src="https://i.stack.imgur.com/KiRnz.png" alt="enter image description here"></p>
  
  <p><strong>FIDDLE</strong></p>
  
  <p><a href="http://jsfiddle.net/mrksantos/60tpo6yh/7/" rel="nofollow noreferrer">Here's a fiddle</a></p>