I'm trying to do something that I think should be pretty straightforward but I have not found a straightforward solution. I am building a responsive website that is mobile first (320px width as the default). At that small resolution, the site is one column and I am happy to allow each individual "box" to expand or contract to the natural size of the contents contained inside. However, at larger resolutions where the site expands to three columns, I want to add a small javascript function to equalize the heights of the boxes of each column. The function I talking about would be something like this:

jQuery(document).ready(function() {
    setHeight('#inner-footer .widget-area');

var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
    //Set the height
I've found different ways to do what I'm talking about. 1) you can use the modernizr "load" function (formally yesnope.js). 2) Using a custom function that incorporates Nicholas Zakas "isMedia" function as described in this link Media Specific Javascript or 3) a custom javascript function using the the "screenWidth" variable as in
var screenWidth = (screen.width < 768) ? true : false;
as described in this post Mediaquieries in the real world

With my limited javascript knowledge, I have been unable to get any of these approaches to work for my script. Can anyone help me out here?

I have no particular preference for approach I just want it to work cross browser, etc. My sense is that the modernizr approach is the most robust and stable way to make this work in the greatest number of use cases but I'm not totally sure of that. Anyone have thoughts and specific code for the modernizr approach or any of the other solutions (or something else)? I greatly appreciate the assistance.