title: Bootstrap change the class on divs when viewing on mobile
body: <p>I have to main divs on my site, the left sidebar, and the right div for the content.</p>
  
  <p>In the left div, i have about 50 <code>&lt;li&gt;</code>, these are product categories. If im viewing the site on mobile, i have to scroll down a lot to see the product or the content, because the to many <code>&lt;li&gt;</code> in the sidebar.</p>
  
  <p>How can i change the divs, that if im on mobile, right div will be the first, and the left sidebar will go down under the right content div. Is there a solution for this?</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-9 custom_right"&gt;&lt;/div&gt;
  
  &lt;div class="sidebar_main_box col-xs-12 col-sm-3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>These divs doesn't have to many css, only float left right, the global bootstrap classes.</p>
  
  <p><strong>Update</strong></p>
  
  <p>My classes:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-9 custom_right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the right div, but in the html, this is beforte the sidebar, this:</p>
  
  <pre><code>&lt;div class="sidebar_main_box col-xs-12 col-sm-3"&gt;
  </code></pre>
  
  <p>My page before the pull and push classes: (good)
  <a href="https://i.stack.imgur.com/eY5ZF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eY5ZF.jpg" alt="enter image description here"></a></p>
  
  <p>After push and pull classes:
  <a href="https://i.stack.imgur.com/Mwu2S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mwu2S.jpg" alt="enter image description here"></a></p>
  
  <p><strong>What i want, is that im viewing the site on a mobile device, the right div will be the first, and the sidebar will be under the right div, it will be the second div.</strong></p>