Different html code based on screen resolution - html

Question

Currently I manage the CSS code differently based on screen size using and it works fine:
#media only screen and (max-width: 40em) {
my code
}
Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.
For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.
How could I achieve that?
Many thanks,

Answer 1

As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
#media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}

Answer 2

With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one.
e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles.
example:
/* Tablets */
#media only screen and (min-width: 760px) {
#news_box { max-width: 760px }
…
}
/* midle screens */
#media only screen and (min-width: 980px) {
#news_box { max-width: 980px; float:left; margin: 0 auto; }
}
/* big screens */
#media only screen and (min-width: 1280px) {
#news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}