title: Twitter Bootstrap - Left column display after right container on mobile devices
body: <p>This is my code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12 col-lg-3"&gt;
          A
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-lg-9"&gt;
          B
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my template on desktop device:</p>
  
  <pre><code>+-------+-------+-------+-------+
  |       |                       |
  |   A   |           B           |
  |       |                       |
  +-------+-------+-------+-------+
  </code></pre>
  
  <p>This is my template on mobile device:</p>
  
  <pre><code>+-------+-------+-------+-------+
  |                               |
  |               A               |
  |                               |
  +-------+-------+-------+-------+
  |                               |
  |               B               |
  |                               |
  +-------+-------+-------+-------+
  </code></pre>
  
  <p>But I want my template to look like this on mobile device:</p>
  
  <pre><code>+-------+-------+-------+-------+
  |                               |
  |               B               |
  |                               |
  +-------+-------+-------+-------+
  |                               |
  |               A               |
  |                               |
  +-------+-------+-------+-------+
  </code></pre>
  
  <p>Is there any way to achieve this without having to change my initial structure?</p>