CSS: div different position in mobile view

My desktop webpage has the following design:

---------------------
|elem1|elem2|tabs   |
|     |     |-------|
|     |     |t1 | t2|
|     |     |       |
---------------------

Now I want to create a responsive design, so if the user switches to the mobile view the website should look the following (portrait mode):

-------------
|elem2      |
|-----------|
|tabs       |
|-----------|
|elem1|t1|t2|
-------------

So basically I want that elem1 (left in the desktop) moves into my tab container (the one that is provided by bootstrap). Is this even possible with a CSS-only solution?

First I thought about putting creating the elem1 twice and display the correct one depending on the screen size but I don't like that solution due to maintenance.