CSS Columns Responsive Issues - html

Question

We are building a simple website in CSS to provide educational resources for other students here at my school. I have chosen to go with the Bootstrap Columns. The problem is on our school's desktop computers and tablets stacks the columns into different rows, instead of just shrinking the size down.
Here is all of the relevant HTML code:
<!-- Left Side Bar -->
<div style="background-color:#F3F8FC;" class="col-lg-2 mobile-hide" ><!-- Not Displayed on Mobile -->
<div class="fotd">
<div class="fotd-title">
<h4>Fact Of The Day</h4>
</div>
<p>Text</p>
</div>
<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter.com/RHL_Inspire" data-widget-id="720721136867282945">Tweets by #RHL_Inspire</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!-- Center Content -->
<div class="col-lg-7 ">
<h3 class="content title">Letter from The Editor In Narwhal</h3>
<p class="content" >
This is a link. This is the actual link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis,
</p>
</div>
<!-- Right Side -->
<div style="background-color:#F3F8FC;" class="col-lg-3 mobile-hide">
<h3 class ="center mobile-hide">Editors Picks!</h3>
<ul class="stickynote mobile-hide">
<li class="stickynote mobile-hide">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
<li class="stickynote">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
<li class="stickynote">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
<li class="stickynote">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
<li class="stickynote">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
<li class="stickynote">
<a class="stickynote" href="http://www.google.com">
Google
</a>
</li>
</ul>
</div>
<div class="row">
<div class="col-lg-12">
<footer>© 2016 The StickyNote | Google</footer>
</div>
</div>

Answer 1

The issue was that we had to change the code to specify two sizes of the column. For example in the original code we had:
<div style="background-color:#F3F8FC;" class="col-lg-7">
This had to be simply changed to:
<div style="background-color:#F3F8FC;" class="col-lg-7 col-sm-7">
The col-sm-7 gets used for smaller screens(such as Tablets and the lower-res desktop computers.