Repositioning Responsive Content

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.