I am trying to build a responsive page with Bootstrap3. The problem that I'm having is that on smaller views(or with more than 1 line of content) my rightside column gets pushed underneath the other columns. I want it to stay on the right and shrink as needed.
Here's some HTML
<div class="container-fluid">
<div class="row" id="row-for-buttons">
<div class="col-xs-12 ">Full Width Scaling - This is persistant</div>
<div id="for-the-buttons">
<button id="sponsor">A Button</button><button id="donate">A Button Now</button><button id="new">A Button</button>
</div>
</div><!--- row --->
<div class="row" id="main-site-row">
<div class="col-xs-2" id="left-gutter">
<ul>
<li><a>Links</a>
<li><a>Links</a>
<li><a>Links</a>
<li><a>Links</a>
<li><a>Links</a>
</ul>
</div>
<div class="col-xs-8" align="center" ><h2>The Main Stuff</h2>
<div>
Lom
</div>
<div class="picture">
<img src="somwhere.jpg">
</div>
<div>
Bacon ipsum dolor amet salami corned beef pastrami, picanha venison porchetta cupim beef rump cow doner.
Landjaeger drumstick kevin, corned beef tri-tip ball tip cow ground round jowl short ribs pastrami jerky sausage
capicola brisket. Hamburger andouille picanha tongue, biltong pastrami kielbasa short loin cupim capicola t-bone sausage
strip steak. Salami flank pork loin meatball brisket sausage frankfurter boudin biltong short ribs pork chuck. Alcatra ground
round pork belly, pork chop frankfurter fatback pork meatloaf corned beef ribeye. Turducken swine ball tip andouille capicola beef ribs tongue fatback.
</div>
<div>
<button>A button</button>
<button>A button</button>
</div>
</div>
<div class="col-xs-2" id="right-gutter">
Bacon ipsum doloramet
</div>
</div><!--- Row --->
</div>