title: How can I change order of 1 column on the left and 2 on the right?
body: <p>Using Bootstrap, on the desktop version of a website I have 1 column on the left and 2 columns on the right. I can do this with the following code:</p>
  <pre><code>&lt;div col-12 col-lg-6&gt;
      &lt;div id=&quot;block1&quot;&gt;1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div col-12 col-lg-6&gt;
      &lt;div id=&quot;block2&quot;&gt;2&lt;/div&gt;
      &lt;div id=&quot;block3&quot;&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But on the mobile version I want to change the order of the blocks so that block2 comes on top, block1 in the middle and block3 at the bottom.</p>
  <p>Block2 (100% width)<br>
  Block1 (100% width)<br>
  Block3 (100% width)</p>
  <p>I tried with order-1 order-lg-2 etc, but I can't figure it out. How to achieve this?</p>
  <p><img src="https://i.stack.imgur.com/LfPyO.png" alt="An image is can be found via this link" /></p>