JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<a href="#">Rotate</a>

CSS

body { font-family: sans-serif; }
ul { overflow: hidden; list-style: none; }
li { height: 100px; width: 100px; margin: 5px; border: 1px solid #000; text-align: center; line-height: 100px; background: #eee; float: left; font-weight: bold; }
a { text-decoration: none; background: #333; color: #fff; padding: 6px; }

JavaScript

var list = $('ul'),
    firstItem = list.find('li:first'),
    lastItem = list.find('li:last');

/*$('a').on('click', function(){
    lastItem.after( firstItem );
});*/
rotate();
$('a').on('click', function(rotate){
    lastItem.after( firstItem );
});