Combine fixed sidebar and fluid content with Push-Pull-Classes - html

Question

In a Nutshell:
This is what i want to achieve: https://jsfiddle.net/Pintolus/faz88ayh/33 (you have to resize the result window to see the effect) but the #Content Div should fill out the rest of the screen-space next to the #Sidebar.
The Sidebar should still move UNDER the #Content on small screens.
This is what i want to achieve:
There should be 3 divs:
#Sidebar, which is on the left side and has a fixed width
#Content, which is on the right side and has a fluid width
#Footer, which is on the bottom of the page and is full width
That is not a big deal, but i want the #Sidebar to move under the #Content on small screens. This alone is also not a big deal and can be achieved by using Bootstraps Push- and Pull-Classes.
The problem is, that i have no idea how to combine both issues.
I want the sidebar to be fixed width (until it moves down) AND to move under the content-div.
This is the code for the left sidebar moving under the #Content:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-md-push-3" id="content"></div>
<div class="col-md-3 col-md-pull-9" id="sidebar"></div>
</div>
<div class="row"
<div id="footer"></div>
</div>
</div>
CSS: (Just for demo)
#sidebar {background: #CCC; height: 150px;}
#content {background: #111; height: 100px;}
#footer {background: #F00; height: 100px;}
See the fiddle here (You have to resize the results window).
Now i want the Sidebar in this fiddle to be fixed width (for example 100px).
Please help, this drives me crazy.
PS: position: absolute for the sidebar is no solution, because it will overlap the footer (due to different height).

Answer 1

Not sure how your push/pull works, bu I assume it's classes that appear on both your divs.
I wonder whether it would be easier to do that with media queries.
Anyway, here's a way to do it (sorry, my knowledge of bootstrap is close to nil, so I went for a very simplified piece of code):
http://jsfiddle.net/txLaukqm/1/
HTML :
<div id="sidebar"></div
><div id="content"></div>
<div id="footer"></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-size: 0; /* to fight the space before the footer due to inline-block */
}
body * {
font-size: 1rem; /* to reset the font-size */
}
#sidebar {
display: inline-block;
background: #CCC;
height: calc(100% - 100px);
width: 100px;
vertical-align: top;
}
#sidebar.hidden {
display: none;
}
#content {
display: inline-block;
background: #111;
height: calc(100% - 100px);
width: calc(100% - 100px);
overflow: auto;
vertical-align: top;
}
#content.full-width {
width: 100%;
}
#footer {
background: #F00;
width: 100%;
height: 100px;
}