Let’s say you add three different ads areas in header.php. One for mobile, which is hidden on desktop, and one for desktop, which is hidden for mobile. And then one for tablet too, just as reference.
<div class="ads-header-desktop">My ads here</div>
<div class="ads-header-tablet">My tablet ads here</div>
<div class="ads-header-mobile">My mobile ads here</div>
Then you would need CSS mediaqueries to hide/display, like this:
.ads-header-desktop { my styling here }
.ads-header-tablet { my styling here }
.ads-header-mobile { my styling here }
/* hide or display */
.ads-header-desktop { display: block; }
.ads-header-tablet,
.ads-header-mobile { display: none; }
@media only screen and (min-width: 720px) and (max-width: 800px) {
.ads-header-tablet { display: block; }
.ads-header-desktop,
.ads-header-mobile { display: none; }
}
@media only screen and (max-width: 719px) {
.ads-header-mobile { display: block; }
.ads-header-desktop,
.ads-header-tablet { display: none; }
}