How to reorder columns in bootstrap on different screens?

Question

css

Hello! We have a 2 column layout. It is necessary that on small screens the right column rises in the middle of the left ...
Here is an example: code:

<div class="row">
        <div class="col-md-6">
            <div class="bg-danger">1</div>
            <div class="bg-success">3</div>
        </div>
        <div class="col-md-6">
            <div class="bg-warning">2</div>
        </div>
    </div>

Here's what it looks like:

On a small screen, it looks like this:

And we need the order to be 1-2-3.
Is it possible to do this with css? Thanks in advance!

Answer 1

<div class="row">
        <div class="col-md-6">
            <div class="bg-danger">1</div>
       </div>
    <div class="col-md-6">
            <div class="bg-success">2</div>
        </div>
        <div class="col-md-6">
            <div class="bg-warning">3</div>
        </div>
    </div>