Javascript 如何根据可见性和id对父div中的子div进行排序？

我正在使用一个显示和隐藏div的配置程序。它在一行中显示4个平铺答案。在我的场景中，我处理的是船只。如果按长度筛选我的船列表。隐藏的div仍然占用空间，因此结果是图像的网格丢失了空间并且没有对齐。我的目标是对div中的子div进行排序，将隐藏的div放在底部，并根据ID对顶部可见的div进行排序。下面是应用过滤器之前的数据结构。你能帮我按能见度和身份分类吗

<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>  

17 SLX

如果您通过CSS隐藏内容，但它们仍然占用空间（

可见性：隐藏

），请尝试将隐藏方法更改为

显示：无

。是否需要类似的方法？我在一个不允许我使用同位素的框架内工作。过滤正在工作。我只想把它分类好。它目前正在使用display:none。但是，是的，Maverick，这就是我希望它工作的方式。