I am using Twitter Bootstrap to create a responsive site using the following layout (simplified for this question):

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class="span7">
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>

When the browser window resizes to tablet size, the rightColumn div is hidden as expected - but it leaves white space next to the mainContent div (with a size of span3).

I would like the mainContent div to expand to full width (so it fills out matches span10 in size).

I am using the following jQuery code to dynamically change the class name for the mainContent div to achive this (and it works as expected):

$(document).ready(function() {
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {
        if ($window.width() < 980) {
            $('#mainContent').removeClass('span7').addClass('span10');
            };

        if ($window.width() >= 980) {
            $('#mainContent').removeClass('span10').addClass('span7');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

My question: is this the preferred way to handle changes to spans in Twitter Bootstrap when the browser window resizes? Or should I just change the CSS for span7 for tablet screen sizes to match that of span10?

jquery css twitter-bootstrap
Edit
Report