How to change the ordering of two divs when on mobile?

Question

I am trying to change the order of two divs in a container when they get to mobile size.

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

Is this possible to change it so that it will change to

<div class="container">
    <div class="div2"></div>
    <div class="div1"></div>
</div>

Answer 1

Update

As of 2024, the answers from @partypete25 @moettinger are more appropriate.

Original Answer

You can use pure css to do that

.container{
    display:table;
}
.div1{
    display:table-footer-group;
}
.div2{
    display:table-header-group;
}

make sure you put it in a @media query.