Bootstrap - messed up @media and overflow issue

Question

https://jsfiddle.net/537wen91/

I am using Bootstrap, and in the example, if you make html view wide, scrollbars disappear, when the view is narrow scrollbars show up. That is what I want. The problem starts when I am in the "narrow view": scroll down to the gray box, now expand html view, see how scrollbars are gone (good), but I also lost my text at the top (not good). Why is my text at the top gone?

Edited to clarify

This way it works: On page load - don't scroll anywhere and stretch the screen so that you see all colored columns on one row. You see some text at top, columns at the bottom, no scrollbar. This is how it should be.

This way it doesn't: Refresh page. Scroll down to the pink column. Now stretch it so that all colored columns appear on one row. See that my text at the top is gone? Why?

If this is still not clear, I would have to make a screen recording...

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
             <h2>title</h2>

        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>bbb</p>
        </div>
        <div class="col-md-2">
             <h2>title</h2>

            <p>bbb</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
             <h2>title</h2>

        </div>
    </div>
    <div id="see" class="row">
        <div class="col-md-2" style="background-color: #FFC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #FC9;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
    </div>
</div>
<nav class="navbar navbar-fixed-bottom">
    <p>Place sticky footer content here.</p>
</nav>

CSS

html {
    /*position: relative;
    min-height: 100%;*/
    height: 100%;
}
body {
    overflow: hidden;
}
#see > div {
    height: 1200px;
}
.navbar {
    margin-bottom: 0;
    min-height: inherit;
}
nav {
    background-color: #222;
    color: #666;
}
@media (max-width: 992px) {
    body {
        overflow: auto;
    }
    #see > div {
        height: 500px;
    }
}

JS

$(window).bind('resize load', function () {
    if ($(this).width() <= 992) {
        $('nav').removeClass('navbar-fixed-bottom');
    } else {
        $('nav').addClass('navbar-fixed-bottom');
    }
});

Answer 1

As mentioned above, the issue is that #see div changes width but not height, and as the page was scrolled, the scrolling remains, leaving the text out of the viewport. Something like this (excuse my poor MSPaint skills):

One possible solution for that would be to scroll to the top of the page right before that change is made, so the text is always visible. You can achieve that just by adding a line of code:

$(window).scrollTop(0);

You can see it working here: https://jsfiddle.net/537wen91/12/

---

One possible CSS-only solution would be to, if the text height is constant, for the #see div add a height of calc(100% - HEIGHT_OF_TEXT). But I haven't tried this.