I have a bunch of <article> elements on a page, some that have "data-order" attributes with values like "1", "6", etc. and some that don't.

I need to be able to move the <article> elements with this "data-order" attribute so that they appear in the order that's set in the attributes.

For example one of the article elements has this <article data-order="2">. That element in this example currently that appears right at the end all the other <articles>. What I want to do is move <article data-order="2"> so that it's 2nd within all the other articles.

E.g I want to achieve this:  http://snag.gy/ai4El.jpg

For each circle I've tried using the "insertBefore" method to actually move the <article data-order> elements into the correct position, but there's an issue.

Demo:  http://jsfiddle.net/2UxdH/

The issue with using "insertBefore" is that as soon as you move the <article> element just before another one, all proceeding <article> elements mess up their order. As explained here:  http://wordpress.org/support/topic/custom-circles-alternate-with-posts-1/page/2?replies=37#post-5142957

What I thought I could do is something like this:

1. // $articles = $('article');
2. 
   
3. // Re-order the articles from within the array
4. 
   
5. // Remove all the articles from the DOM
6. 
   
7. // Add all the articles into the DOM from the $articles array with the correct order

But I don't know how to re-order the circles within the array.

Any ideas?