shift backward images from current image to forward

shift backward images from current image to forward

demo
I have the following html....
<div id="banner">
<img class="img1" src="" />
<img class="img2" src="" />
<img class="img3" src="" />
<img class="img4" src="" />
</div>
<ul>
<li class='li1'>one</li>
<li class='li2'>two</li>
<li class='li3'>three</li>
<li class='li4'>four</li>
</ul>
When I click on .li3(three) the previous images .img1, .img2 should be
shifted to the last i.e. here from .img4. The output should be like this:
<div id="banner">
<img class="img3" src="" />
<img class="img4" src="" />
<img class="img1" src="" />
<img class="img2" src="" />
</div>
I have no any idea on this that how could I do this?