Grids getting stacked inside the modal pop-up
<p>I have 5 grids inside a bootstrap modal pop-up.</p>

<p>When I click on the popup button,the grids are stacked one over the other.When I drag one grid,whole 5 grids are getting accumulated properly.Once this is done.It is working fine from next clicks of popup button.</p>

<p><strong>Code follows</strong></p>

<pre><code>&lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;

&lt;!-- Modal --&gt;
&lt;div id="myModal" class="modal fade" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;

    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;h1&gt;Image sort&lt;/h1&gt;
&lt;div class="packery"&gt;
  &lt;div class="item w2 h2 i1" tabindex="0"&gt;A&lt;/div&gt;
  &lt;div class="item w2 h2 i2" tabindex="1"&gt;B&lt;/div&gt;
  &lt;div class="item w2 h2 i3" tabindex="2"&gt;C&lt;/div&gt;
  &lt;div class="item w2 h2 i4" tabindex="3"&gt;D&lt;/div&gt;
  &lt;div class="item w2 h2 i5" tabindex="4"&gt;E&lt;/div&gt;
&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/iamraviteja/hafa50r7/1/" rel="nofollow"><strong>Fiddle Demo here</strong></a></p>