Using Bootstrap 3.0 How can I make my sidebar column span 100% width on mobile devices?

Using Bootstrap 3.0 How can I make my sidebar column span 100% width on
mobile devices?

So I'm trying to setup a grid system for my responsive design so that on a
desktop computer I have a main column on the left for content and a right
side bar. I'm wanting the sidebar though to span 100% of the screen if
it's on a mobile device though. I'm using the example show at the
bootstrap site here: http://examples.getbootstrap.com/grid/ at the bottom
of the page -- or shown below...
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">main content</div>
<div class="col-6 col-sm-4 col-lg-4">right side bar</div>
</div>
The main content column spans 100%, but the right side bar column doesn't.
It spans 80% of the screen (i think). I'd like it to do 100% if it's on
mobile site since there isn't really a point to keeping it any smaller and
having white space to the right of it.