Question posted in 
I am making a responsive page and need to move a section of content to a different place in the DOM on mobile vs desktop screens.
My current solution is to have the content duplicated in both places but tag one with a show-on-mobile-only media query and the other with a show-on-desktop-only media query.
This is simple and works but I am wondering if there are any potential pitfalls with having some of my content repeated on the page in terms of page load speed, accessibility or SEO. Alternatively, I could try using JS to move the element, but that has its own issues.
I see that this is a similar question, however it did not fully answer my particular concerns.
I’d appreciate your thoughts.
Thanks.
2
Answers
In terms of accessibility, some people have css turned off so then it would still appear twice.
Unless there’s a really special reason why you need to have specfic content for different device views, it would be far easier—and much more maintainable—to employ responsive web design (RWD). If you do that, your layouts would be controlled via CSS, and JavaScript would only be needed for items such as responsively served images and mobile menus.
Another added advantage of using RWD is semantic HTML markup, and makes your content much more accessibility—and SEO—compliant. It’s good to keep in mind that changing visibility on elements can wreak havoc on screen readers—which can be quite challenging for disabled users.