bootstrap grid for mobile layout - html

Question

I have the following markup
<div class="container">
<div class="row">
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
</div>
<div class="row">
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
</div>
</div>
How can i have the content section sit on top of the sidebar for mobile view? for example with the above markup ill get the following in mobile view (stack)
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
siderbar
</div>
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
siderbar
</div>
but i want to achieve the following for mobile view
<div class="col-sm-8>
content
</div>
<div class="col-sm-8">
content
</div>
<div class="col-sm-4">
sidebar
</div>
<div class="col-sm-4">
sidebar
</div>
I've seen this done before but just forgot. Thanks everyone

Answer 1

After multiple attempts of just experimenting I found this way.
I decided to remove one whole row and squeeze all the contents in col-sm-8 and all the sidebar content in col-sm-4
<div class="col-sm-8">
content
content
</div>
<div class="col-sm-4">
sidebar
sidebar
</div>

Answer 2

The you are defining the behaviour for your columns to be the same for all displays. If you want them to appear differently, you've got to use them accordingly. The sm part of your css class name tells you how you want to render on that particular size of screen. So you use xs for very small screens, s for small screens, md for medium and so on.
Changing your markup to this should do the trick, I've always found best to play around with it a bit by changing your browser size or with some nifty browser addon. I changed your columns a bit, because it seems to me like you would want your content and sidebar to take the whole width of the screen on a mobile device.
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
content
</div>
<div class="col-md-4 col-sm-12">
sidebar
</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-12">
content
</div>
<div class="col-md-4 col-sm-12">
sidebar
</div>
</div>
</div>
See this codepen snippet for reference: http://codepen.io/anon/pen/VLoMML
You can specify different layouts for each of the bootstrap supported different screen sizes, xs being good for mobile phones, x being good for tablets, md being good for regular sized computer screens and l for large displays. The documentation is really quite comprehensive: http://getbootstrap.com/css/#grid