テーブルの要素の並び順を入れ替えるボタンを作成したい


以下のように一番上の要素を一番下に移動させるようなボタンの処理を jQuery で書きたいのですが、どのような書き方をすればいいのでしょうか？  
教えて頂けると助かります。

[code]

    1　　　2　　　3
    2　　　3　　　4
    3   →  4　 →  5
    4　　　5　　　1
    5　　　1　　　2
    
[/code]

**HTMLコード：**

[code]

    <div class="contents contents--table">
            <div class="table_title">テーブル</div>
            <div class="table"></div>
            <div id = "div-a">1番目</div>
            <div id = "div-b">2番目</div>
            <div id = "div-c">3番目</div>
            <div id = "div-d">4番目</div>
        </div>
        <button class="tabledown">移動</button>
    
[/code]




**HTML要素を並び替えたい** だけなのか, **jQueryでの手法** を知りたいのか,
質問からは判断できなかったため「HTML要素を並び替え」について記します

[code]

    document.querySelector('.tabledown').onclick = function () {
      var el = document.querySelector('div.contents>div.table').nextElementSibling
      var p = el.parentElement
      p.removeChild(el)
      p.appendChild(el)
    }
[/code]

[code]

    <div class="contents contents--table">
            <div class="table_title">テーブル</div>
            <div class="table"></div>
            <div id = "div-a">1番目</div>
            <div id = "div-b">2番目</div>
            <div id = "div-c">3番目</div>
            <div id = "div-d">4番目</div>
        </div>
        <button class="tabledown">移動</button>
[/code]

