How to swap divs on mobile view

[Goldorak]

Hello
I have 2 columns 1/2 | 1/2
Left column
<div class='container'>
<div class='item1'>text</div>
<div class='item2'>image</div>
</div>

Right column
<div class='container'>
<div class='item3'>image</div>
<div class='item4'>text</div>
</div>
More info
On desktop view the text and image are on the same line
On mobile view the text goes on top of the image like it's suppose but I would prefer having the image on top of the text. The right column is just fine on mobile so I am just looking to modify the left column to behave like the right column on mobile view only. CSS or jscript but would prefer CSS

 

[CCarter]

Occam's razor for Left column:

<div class='container'>
<div class='item2'>image</div>
<div class='item1'>text</div>
</div>

--

LOL; But seriously, use the mobile media css (you might have to change the max-width):

@media only screen and (max-width:599px){
        .container { display: table; }
        .container .item1 { display: table-footer-group; }
        .container .item2 { display: table-header-group; }
}

http://jsfiddle.net/1hmqrzbk/

OR

@media only screen and (max-width:599px){
        .container { display: flex; }
        .container .item1 { order: 2; }
        .container .item2 { order: 1; }
}

http://jsfiddle.net/fvd1Lryg/

^^ Maybe put a "clear:both;" for items1 and item2 in the last code.

--

Edit: Added the JSFiddle versions...