jquery search for multiple cards with re-position

Question

I am using jquery to search a page that contains multiple bootstrap cards. The code works fine:

<script>
$(document).ready(function () {
    jQuery.expr[':'].icontains = function (a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#txtSearch').keyup(function () {
        var text = $(this).val();
        // Hide all content class element
        $('.searchable').hide();
        // Search and show
        $('.searchable:icontains("' + text + '")').show();
    });
});

However, the cards that are found remain in its original position with the ones that matching show empty spaces. For example, if there are 4 cards in the first row, and the third card matches the criteria, it will hide the first two and the last one but the third one remains in its original position. How can I re-position all the found cards to line up as if there are no other cards?

Answer 1

I've figured out why. It's because I am using row with col-lg-4. Once I remove row and columns, and just use cards, it works. But I have to define a fixed width, which is fine.