Hello! I apologize in advance for my poor English.

See, there is a snippet 

https://mdbootstrap.com/snippets/jquery/arogonov/252103

On the big screen, everything is as I need. Div1, Div3 in the left block, and Div2 in the right.

On the small screen we see the following order of layers (from top to bottom) will be div1, div3, div2.

I need to have div1, div2, div3. The only option that came to my mind is shown here.

https://mdbootstrap.com/snippets/jquery/arogonov/252115

But this is a bad choice, since Div2 is duplicated in the code twice. Are there more elegant solutions? Thank you in advance.