Avoiding duplicated content for responsive page

Question

I am currently working on a project dealing with responsive design, and the whole layout should be achieved using HTML and CSS. I know its possible to move content from one column layout to another, without duplicating content, using java script but is the same achievable using HTML and CSS?

Take for example the following which would render like this on the desktop design

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

But then the designer has moved div1 to below div2 on the mobile design.

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

Obviously the natural way the block level elements will stack is the opposite way around.

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |  <--- shown on desktop
|  --------  --------   |
|  --------             |
|  |div 1 |             |  <--- hidden on desktop
|  --------             |
-------------------------

--page--------
|  --------  |
|  |div 1 |  | <--- hidden on mobile
|  --------  | 
|  --------  |
|  |div 2 |  | <--- shown on mobile
|  --------  |
|  --------  |
|  |div 1 |  | <--- shown on mobile
|  --------  | 
--------------

Using the above, the content of div1 is duplicated. Is this bad for SEO? Clearly it's not optimal as the content appears twice in the DOM etc, so speed is affected (albeit possibly negligible).

Are there any other solutions which I could implement which aren't javascript based which might alleviate the issue?

Any advice would be much appreciated.

Answer 1

Duplicate content for SEO is a real problem with responsive pages if you are hiding and unhiding elements. The code is still rendered in the DOM and if the search engines can see the code (even if the user cannot see the output) it will still count against you. None of the answers above provide a real solution for this, and to be quite honest I can't either at this point.

I am moving towards actually removing elements with javascript from the DOM, but that gets extremely messy and is not ideal either.

The media query answer above will not change the fact that you still have HTML outputting into the DOM with duplicate content.