title: Dashboard with 5 sortable responsive grids in foundation
body: <p><img src="https://i.stack.imgur.com/bbR3z.png" alt="enter image description here"><img src="https://i.stack.imgur.com/oBWoR.png" alt="enter image description here"></p>
  
  <p>I am trying to create a dashboard with 5 sortable responsive grids in foundation. Four grids have same widths and one has double the width of the other grids. The grids have to be responsive and mobile friendly. They have to stack under one another for resolutions &lt;= 768. I tried using many libraries. For some I had containment issues and for some padding/gutter issues and responsive issues.</p>
  
  <p>The below code is my latest trial. It has intermittent containment issues when we sort along y axis and breaks when gutter between grids is introduced.
  I am new to foundation, sorting. Please check the below code and let me know how to fix the above two issues.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Foundation | Welcome&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css" /&gt;
      &lt;style type="text/css"&gt;
          .list {
              background-color: pink;
              font-size: 30px;
              text-align: center;
              cursor: pointer;
              font-family: Geneva, Arial, Helvetica, sans-serif;
              border: 1px solid gray;
          }
  
          .listDbl {
              border: 1px solid #000;
              background-color: pink;
              font-size: 30px;
              text-align: center;
              cursor: pointer;
              font-family: Geneva, Arial, Helvetica, sans-serif;
              border: 1px solid gray;
          }
      &lt;/style&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="sortable"&gt;
          &lt;div class="row display"&gt;
              &lt;div class="ui-state-default large-4 columns list"&gt;1&lt;/div&gt;
              &lt;div class="ui-state-default large-4 columns list"&gt;2&lt;/div&gt;
              &lt;div class="ui-state-default large-4 columns list"&gt;3&lt;/div&gt;
              &lt;div class="ui-state-default large-8 columns listDbl"&gt;4&lt;/div&gt;
              &lt;div class="ui-state-default large-4 columns list"&gt;5&lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).foundation();
              $(function() {
                  $(".row").sortable();
                  $(".row").disableSelection();
              });
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/mBSA4/66/" rel="nofollow noreferrer">http://jsfiddle.net/mBSA4/66/</a></p>