How to move an element below elements with a class

How to move an element below elements with a class

I have a list of items. Some number of items at the top have a class.
<ul>
<li class="blue moveMeDown">1</li>
<li class="blue">2</li>
<li class="blue">3</li>
<li class="blue">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
I'm trying to write jQuery to move item 1 down below the items with the
class blue. To target the last item with that class, I'm using this:
$elm.nextUntil(":not(.blue)").last()
That seems like a mess, and it doesn't even work if there is only 1 blue
item. There must be a better way to do this.
Here's the JSfiddle.
Current jQuery:
$("ul").on("click", ".moveMeDown", function(e){
var $elm = $(this);
$elm
.insertAfter($elm.nextUntil(":not(.blue)").last())
.removeClass("blue");
});