刷新网站时如何交换ramdom多个div的位置

Question

如何交换它们的位置可用？ 如何使用jquery在刷新页面中交换多个div的位置？

示例：

  

info1 Info2 info3 info4

     

info5 info6 info7 info8

如何交换随机：

  

info1 info3 info5 info6

     

info4 info2 info7 ... v.v。

这个CSS：

    .section_13{ width:280px; float:left; margin:0 0 40px 40px; }
    .section_13:hover{  margin: 0px auto;
        cursor:pointer;
        background-color: rgba(250,250,250,0.1);
        border-radius: 1px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1), 
                    inset 0px 1px 0px 0px rgba(250, 250, 250, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
  img.feat_thumb{float:left;}

    .feat_details{width:180px;float:left;padding:0 0 0 10px;}
    .test_right{width:315px;float:left;padding:0 0 0 10px; }
    p.feat_text{font-style:italic; letter-spacing:5px;  position: relative; margin-top:100px; margin-left: 30px;}
    .testimonial{ border-bottom:1px dotted #ddd; padding:0 0 10px 0; margin:0px 0 0px 0; clear:both; float:left;}

    .section_13 ul{padding:15px 0 25px 0; margin:0px; list-style:none;}
    .section_13 ul li{padding:7px 0 7px 0; margin:0px;border-bottom:1px dotted #ddd; line-height:19px;}
    .section_13 ul li a{ padding:0 0 0 15px;}
    .section_13 ul li a:hover{color:#000000;}

和HTML：

<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info1</h4>
        <p>info1</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info2</h4>
        <p>info2</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info3</h4>
        <p>info3</p>
    </div>
</div>
<div class="clear">
    <hr>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info4</h4>
        <p>info4</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info5</h4>
        <p>info5</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info6</h4>
        <p>info6</p>
    </div>
</div>
<div class="clear">
    <hr>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info7</h4>
        <p>info7</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info8</h4>
        <p>info 8</p>
    </div>
</div>
<div class="section_13">
    <img src="" alt="" title="" border="0" class="feat_thumb" />
    <div class="feat_details">
         <h4>info9</h4>
        <p>info9</p>
    </div>
</div>