Basic jquery ui sortable connected lists

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="row">
	<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
		<div class="widget">Widget 1</div>
	</section>

	<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
		<div class="widget">Widget 2</div>
	</section>

	<section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
 <div class="widget">Widget 3</div>
	</section>
</div>
<div class="row">
	<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
  <div class="widget">Widget 4</div>
	</section>

	<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
  <div class="widget">Widget 5</div>
	</section>

	<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
  <div class="widget">Widget 6</div>
	</section>

	<section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
  <div class="widget">Widget 7</div>
	</section>
</div>

CSS

.connectedSortable {
    background: lightgrey;
    border: 1px solid grey;
    min-height:50px;
}
#widgets {
  height: 300px;
  background-color:#F0F8FF;
  
}
.widget {cursor:move}

JavaScript

$(".connectedSortable").sortable({
	cursor: 'move',
	connectWith: ".connectedSortable"
}).disableSelection();