Swap text to the top using jquery

This is a sample of how to swap text to the top using .append() in 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/