jQuery Sortable with Bootstrap

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="row grid span8">
    <div class="well span2 tile" id='1'>A</div>
    <div class="well span2 tile" id='2'>B</div>
    <div class="well span2 tile" id='4'>C</div>
    <div class="well span4 tile" id='3'>D</div>
</div>

CSS

.placeholder {
    border: 1px solid green;
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
    height: 100px;
}
.grid {
    margin-top: 1em;
}

JavaScript

$(function () {
    $(".grid").sortable({
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true,
        update: function(event,ui)
        {
        		var orderIds = [];
            $('.well').each( function(e) {

               //add each li position to the array...     
               // the +1 is for make it start from 1 instead of 0
               alert($(this).attr('id'));
                orderIds.push(this.attr('id'));
              });
              
        }
    });
});