Troque o texto para o topo usando jquery

Cenário

Este é um exemplo de como trocar texto para o topo usando .append () em jquery.

HTML

<div id="content">
<div class="blocks top">one</div>
<div class="blocks">two</div>
<div class="blocks">three</div>
<div class="blocks">four</div>
</div>

CSS

.blocks {
line
-height: 50px;
margin
: 0 30px 1px;
text
-align: center;
display
: block;
border
: 1px solid grey;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border
-radius: 5px;
}
.top {
color
: #fff;
background
: #6c9d31;
font
-size: 30px;
font
-weight: bold;
border
-bottom: 1px solid #372d22;
}

JQUERY

$('.blocks').click(function(){
$
('.blocks').removeClass('top');
$
(this).hide().slideDown().addClass('top');
$
(this).parent().append($('.blocks').not(this));
});

DEMO
http://jsfiddle.net/itsduc/VADhh/