How to I sort child divs in a parent div by both visibility and id?

Question

I'm working with a configurator that shows and hides divs. It shows 4 tiled answers in a fluid row. In my scenario I'm dealing with boats. If filter my boat list by length. The divs that hide still take space, so the result is a grid of images that has missing spaces and doesn't line up. My goal is to sort the child divs inside of a div, putting the hidden ones at the bottom and sorting the visible ones at the top by ID. Below is the structure of the data before a filter is applied. Can you help me sort by Visibility and 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>