Mobilde ve masaüstünde farklı reklam boyutları gösterme

Arkadaşlar merhaba, Mobilde ve masaüstünde farklı çözünürlükteki reklam görsellerini sadece anasayfada uygulamak istiyorum. Şu kodu deniyorum ancak kısa süre sonra, masaüstünde de mobil reklam görselini göstermeye başlıyor. CSS bilgim yok, bu yüzden direk index.php den müdahale edebileceğim bir kod ile bunu çözmem mümkün mü? Denediğim kod şu ve malesef başarısız oldum.

<center>
<?php if(wp_is_mobile()) : ?>
Mobilde görünecek reklam kodu
<?php else: ?>
Masaüstünde görünecek reklam kodu
<?php endif; ?>
</center>

Divlerin claslarını değiştirmeniz yeterli. Sorunu çözemezseniz pm atın. bakayım.

@media only screen and (max-width: 786px) {
 .mobilreklam {
    display: block;
  }
  .pcreklam {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .pcreklam {
    display: block;
  }
  .mobilreklam {
    display: none;
  }
}