How can I change order of 1 column on the left and 2 on the right?

Question

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:

<div col-12 col-lg-6>
    <div id="block1">1</div>
</div>
<div col-12 col-lg-6>
    <div id="block2">2</div>
    <div id="block3">3</div>
</div>

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.

Block2 (100% width)
Block1 (100% width)
Block3 (100% width)

I tried with order-1 order-lg-2 etc, but I can't figure it out. How to achieve this?