How to use responsive twitter bootstrap & masonry together

Getting twitter bootstrap’s responsive layout and masonry to play alongside each other is pretty simple. Assuming you are not using the fluid container (container-fluid) here’s the code:

Javascript:

    $(document).ready(function () {

            $("#posts").masonry({
                itemSelector: '.post',
                isAnimated: true,
                columnWidth: function( containerWidth ) {

                    // do nothing for browsers with no media query support
                    // .container will always be 940px
                    if($(".container").width() == 940) {
                        return 240;
                    }

                    var width = $(window).width();
                    var col = 300;

                    if(width < 1200 && width >= 980) {
                        col = 240;
                    }
                    else if(width < 980 && width >= 768) {
                        col = 186;
                    }

                    return col;
                }
            });
    });

Demo (make sure you resize the frame in the bottom right):
http://jsfiddle.net/mWtmY/288/