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

Question

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.

Answer 1

This should do the trick for you:

<div class="row">
<div class="col-12 col-sm-8 col-lg-8 main">main content</div>
<div class="col-12 col-sm-4 col-lg-4 right">right side bar</div>
</div>  

see live