What is the best way to move an element that's on the top to the bottom in Responsive design

Question

I have the following HTML format, what is the efficient way to position the given element on the top on a desktop and bottom on mobile devices (width < 640pixels)? Since

Answer 1

Better compatibility than flexbox can be achieved with display: table-footer-group (IE8+)
Reverse effect: to move an element higher than it is in the HTML code, you can try table-caption and table-header-group.

Doesn't work with self-replaced elements like img or input, at least on Chrome (and that's quite normal) but fine with div for example.

EDIT: it's 2016 so Flexbox (and Autoprefixer) all the things \o/