Crossbrowser issue responsive design

Before asking the question, I’d like to describe the problem that I’m trying to resolve.

I have a page made with bootstrap

http://inants.com/kadmos/web/kad/bootres/ji/break.html

It was needed to make so that when the browser page is resizing the bootstrap left tab that I’ve used for my left menu (left part of the screenshot) becomes a bootstrap collapsing menu (right part of the screenshot)

The screenshot is here: http://inants.com/kadmos/web/menu.png

But the problem is that they should have different html codes and bootstrap classes. That’s why I’ve written a jquery code that is adding and removing the necessary tags and classes. For example when the browser is in full screen, my html code should be the following:

<div class="tabbable tabs-left">
        <button type="button" style="display:none;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#B">My Saved Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#C">My Searches</a>
            </li>
            <li>
                <a data-toggle="tab" href="#D">My Alets</a>
            </li>
            <li>
                <a data-toggle="tab" href="#E">My Profile</a>
            </li>
            <li>
                <a data-toggle="tab" href="#F">My Settings</a>
            </li>
        </ul>
        <div class="tab-content"></div>
</div>

And during the responsive view, there should be the following code:

<div class="tabbable tabs-left navbar navbar-inverse openNavbar">
    <button type="button" style="display:block;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="nav-collapse collapse">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>...
            </li>
        </ul>
    </div>
    <div class="tab-content"></div>
</div>

So we can see that during responsive mode, the following changes are made on html:

1. "navbar navbar-inverse openNavbar" bootstrap classes are added to the div that has ‘tabbable’ class

2. in the div that has “tabbable” class, the “button" has display:block;

3. "ul" tag is inserted within the div having "nav-collapse collapse" classes

Here’s the jquery code that is responding for the change of html codes mentioned upper:

<script type="text/javascript">
    $(document).ready(function() {
        $(window).resize(function() {
            if ($(window).width() <= 979) {
                $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
                if ($('.nav').parent().hasClass('tabbable')) {
                    $('.nav').wrap('<div class="nav-collapse collapse"></div>');
                }

                $('.content > .tabbable > button').show();

            } else { 
                $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
                if (!$('.nav').parent().hasClass('tabbable')) {
                    $('.nav').unwrap()
                }
                $('.content > .tabbable > button').hide();
            }
        });
        if ($(window).width() <= 979) {
            $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
            if ($('.nav').parent().hasClass('tabbable')) {
                $('.nav').wrap('<div class="nav-collapse collapse"></div>');
            }
            $('.content > .tabbable > button').show();

        } else { 
            $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
            if (!$('.nav').parent().hasClass('tabbable')) {
                 $('.nav').unwrap()
            }
            $('.content > .tabbable > button').hide();
        }
    });
</script>

Though it seems everything is ok, and it should work normally, but…

When I resize the page in Mozilla (Internet explorer 9) between 979px- 963px sizes, the page is breaking. Particularly it’s not working @media (max-width: 979px) {...} condition for which in bootstrap-responsive.css, bootstrap.css, style.css files it’s written an appropriate code. It seems to me that the problem is in the difference of sizes of Mozilla (IE9) and Chrome though in firebug when the size is the same, the page is displayed wrong on one browser, and right on the other. When I change the condition $(window).width() <= 979) to $(window).width() < 979), it becomes just the reverse...

Will be waiting for your suggestions regarding the solution of this bug.

Thanks in advance.