foundation example

HTML

<script src="//cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"></script>
<script src="//cdn.jsdelivr.net/foundation/3.2.2/javascripts/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
    <div id="sortable">
        <div class="row display">
            <div class="ui-state-default large-4 columns list">1</div>
            <div class="ui-state-default large-4 columns list">2</div>
            <div class="ui-state-default large-4 columns list">3</div>
            <div class="ui-state-default large-8 columns listDbl">4</div>
            <div class="ui-state-default large-4 columns list">5</div>
        </div>

CSS

.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;
        }

JavaScript

$(function() {
                $(".row").sortable();
                $(".row").disableSelection();
            });