resize bootstrap div on window resize

Question

This is a continuation from my previous question here.

I'm using bootstrap and it doesn't arrange the div such that they have the same height. I have solved the problem of resizing the div to same height for the children div.

But it doesn't resize in realtime i.e. when I'm resizing the window, "maxHeight" still remains the same though the function still runs when the window's resized.

Below is the function and code.

     function resized(){

        var maxHeight = -1;

        if (size == "xs"){
            $('.col-xs-12').each(function(){
                $(this).height("auto");
                maxHeight = 0;
            });
        }

        if (size == "sm"){
            $('.col-sm-6').each(function() {
                maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
            });

            $('.col-sm-6').each(function() {
                $(this).height(maxHeight);
            });
        }

        if (size == "md"){
            $('.col-md-4').each(function() {
                maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
            });

            $('.col-md-4').each(function() {
                $(this).height(maxHeight);
            });
        }

            console.log("maxHeight : " + maxHeight);    
    };

    $().ready(function(){
        $(document).ready(resized)
        $(window).resize(resized);  
    })

Thanks in advance!