JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b one">List Item (type2)</li>
</ol>

CSS

ol { padding: 0; width: 320px; list-style: none; }
li { float: left; width: 98px; height: 98px; margin: 0 10px 10px 0; border: 1px solid #AAA; }
.one { clear: left; }
.three { margin: 0 0 10px; }

JavaScript

$("ol").parent().append("<h2>Type 2 starts here</h2>");
var newList = $("<ol></ol>");
$(newList).append($('li:contains("type2")').detach());
$("ol").parent().append(newList);