jQuery UI Library Sortable Sortable Grid with flex layout

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

This used the flex layout with the sortable to create a grid of responsive boxes that can be moved around by dragging and dropping.

HTML

<div id="sortable">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div> 

JS

$(function(){
    $('#sortable').sortable({
        //pass all options in here
    });
});

CSS

#sortable{
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}
#sortable div {
    margin: 10px;
    background-color: #f00;
    flex-basis: 100px;
    height: 100px;
}


Got any jQuery UI Library Question?