如何通过可见性和ID对父div中的子div进行排序？

Question

我正在使用显示和隐藏div的配置程序。它在一个流畅的行中显示了4个平铺的答案。在我的场景中，我处理的是船只。如果按长度过滤我的船名单。隐藏的div仍然占用空间，因此结果是一个缺少空格但不排列的图像网格。我的目标是在div中对子div进行排序，将隐藏的div放在底部，并按ID在顶部对可见的div进行排序。下面是应用过滤器之前的数据结构。你能帮助我按可见性和ID排序吗？

<div class="row-fluid">
    <div data-ref="MODEL/17SLXDE" class="span3" data-order="8"> 
        <label>
            <div class=" item-label  tile-answer" style="padding-top: 3px; border: none; background-color: rgba(0, 0, 0, 0);"> 
                <input type="radio" data-ref="MODEL/17SLXDE" id="5577aef88ff578876c419a0a" class="custom-radio">  
                <span class=""><p>17 SLX</p></span>
                <img src="img.png" style="padding: 0px; border: 0px; box-shadow: 0px" class="thumbnail" crossorigin="anonymous">     
            </div>
        </label> 
    </div>   
</div>