L'évolution dynamique de nom de classe basée sur la taille de la fenêtre

Je suis en utilisant Twitter Bootstrap pour créer un site responsive à l'aide de la mise en page suivante (simplifié pour cette 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>

Lorsque la fenêtre du navigateur est redimensionnée à la taille de la tablette, la rightColumn div est caché comme prévu - mais il laisse un espace blanc à côté de la balise div mainContent (avec une taille de span3).

Je voudrais la balise div mainContent de l'étendre à toute la largeur (de sorte qu'il remplit les matchs span10 en taille).

Je suis l'aide de la suite de jQuery code pour modifier dynamiquement le nom de la classe pour la balise div mainContent d'arriver à cela (et il fonctionne comme prévu):

$(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);
});

Ma question: est-ce la meilleure façon de gérer les modifications apportées à des durées de Twitter Bootstrap lorsque la fenêtre du navigateur est redimensionnée? Ou devrais-je modifier le CSS pour span7 pour écran de tablette tailles pour correspondre à celle de span10?