Hoping to get some Bootstrap help
**Problem (I'll try articulate best I can)
Have been asked to construct this layout in bootstrap, at these breakpoints.
The left navigation (the 3 col on the left) will eventually be replaced with a top navigation menu. So we are hoping to come back and adjust our col widths when it goes. The site will have a fixed width as per the diagram. The current navigation is fixed (I as doing this all in SharePoint via design manger using Master pages and page layouts, I have that side covered))
However, I don't think bootstrap works well with a left-hand navigation like this. This site says there are no ways to do it with the framework, and offers some solutions:
I have done some research, and found a bunch of other examples where they use a side nav div and some custom css and JS to make this work.
I have an poor example of this NOT working here
**What I think
I just go back and say let's roll with the fixed nav, and construct everything else inside a 12 col, fixed-width container on the right.
** Bonus questions
1) The breakpoints switch from a 30 px gutter to a 20px gutter, is this normal ok? I guess I could use a media query here
2) I assumed I would be using a media query to make the left nav vanish (something like display:none;) at some breakpoint. But I am not sure if I can / should modify the DOM in this manner
3) I have been asked to experiment, given some time to work this out, and I can use whatever version of BS I like. I was thinking of using the generator (https://getbootstrap.com/docs/3.3/customize/). Should I use this to set some breakpoints?
3.1 I can't use less / sass in this environment as I am unable to install a complier due to SOE permissions.
Thanks in advance!