Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
  </head>

  <body>
    <ul class="sort-container" id="items">
      <li><span>A</span></li>
      <li><span>B</span></li>
      <li><span>C</span></li>
      <li><span>D</span></li>
      <li><span>E</span></li>
      <li><span>F</span></li>
      <li><span>G</span></li>
      <li><span>H</span></li>
      <li><span>I</span></li>
      <li><span>J</span></li>
      <li><span>K</span></li>
      <li><span>L</span></li>
      <li><span>M</span></li>
      <li><span>N</span></li>
      <li><span>O</span></li>
      <li><span>P</span></li>
    </ul>
    <script>
      var el = document.getElementById('items');
      var sortable = Sortable.create(el, {
        animation: 150,
      });
    </script>
  </body>

</html>

body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sort-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  color: white;
}
.sort-container > li {
    cursor: move;
    list-style: none;
    flex: 0 0 16.66%;
}
.sort-container > li span {
  display: block;
      padding: 1rem;
      background: red;
    text-align: center;
    margin: 0.5rem;
}
.sort-container > li span:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-top: 100%;
}
.sortable-ghost {
    opacity: 0.6;
}