随机或按标题排序DIV

Question

我有一个网格，包含带有图像和文字的框，如下所示：

   <div id="grid">

<!-- -------------------------- BOX MARKUP -------------------------- -->      
        <div class="box" data-category="Beerary">
            <div class="box-image">
                <div data-thumbnail=".." ></div>
            </div>

            <div class="box-caption">
                <div class="box-title">Title 1</div>
                <div class="box-text">
                    random text...    
                  </div>
             </div>
        </div>

<!-- -------------------------- BOX MARKUP -------------------------- -->      
        <div class="box" data-category="restaurant">
            <div class="box-image">
                <div data-thumbnail=".." ></div>
            </div>

            <div class="box-caption">
                <div class="box-title">Title 2</div>
                <div class="box-text">
                    random text...    
                  </div>
             </div>
        </div>

我想创建一个按钮，以便随机或通过box-title对框进行排序。我尝试使用tinysort就像我看到here但它没有用。

我可以帮忙吗？

编辑：低于其经过考验的http://jsfiddle.net/vbqL2m82/ 我认为不管怎样我必须标记方框标题才能对它们进行排序。