JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
// Doesn't work reliably with flexbox.<br>
// It's especially hard to drop layer 6 between layers one and two

<ul>
    <li>layer one</li>
    <li>layer two</li>
    <li>layer three</li>
    <li>layer four</li>
    <li>layer five</li>
    <li>layer six</li>
</ul>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    background:pink;
    height: 300px;
    list-style: none;
    padding: 0;
    overflow: auto;
    width: 250px;
    display: -webkit-flex;
    display: -ms-flexbox; 
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

li {
    background: lightblue;
    min-height: 40px;
    margin-bottom: 2px;
    padding: 10px;

}
.ui-sortable-helper {
    outline: 1px dashed green;
}

JavaScript

// using 1.10.3 from cdn

$("ul").sortable();
$("ul").disableSelection();