There's site I'm working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).

My question is, what would be the best way to go about this? So far I have only two ways.

1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it's not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?

2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?

Would really appreciate some input on best practices in a situation like this.

Here's what I'm trying to achieve:
[![layout](https://i.stack.imgur.com/dzTIj.png)](https://i.stack.imgur.com/dzTIj.png)