title: How to bring left sidebar below the content for mobile view in bootstrap?
body: <p>In my bootstrap web page i have a left sidebar and besides it i have the page content. The HTML code is:</p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;Sidebar&lt;/div&gt;
  &lt;div class="col-sm-9"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>I like the view for laptops and bigger screens but on screens &lt;768 px wide (tablets and smartphones). The divs slack and the sidebar comes on top of content div. </p>
  
  <p>I know this is a bootstrap feature but i want it to slack another way- i want the content to be at top of sidebar on screens &lt;768 px wide. </p>
  
  <p>You can view this thing on the <a href="http://www.yogihosting.com/category/jquery/" rel="nofollow noreferrer">jQuery</a> page. Opening the page on smaller browser view will show what i mean.</p>
  
  <p>Can this be done in bootstrap? I definitely want to the design to remain same for laptop and bigger screen. </p>
  
  <p>And i don't want to apply any custom media query for this. Can bootstrap provides a solution for things like this? Please help. thanks </p>