Remover trecho php e substituir por outro de acordo com a largura da página

Resumidamente, queria esse código quando a largura da página fosse maior que 700px:

<?php if($this->API->get('show_menu', 1)) : ?>
<div id="MainMenu" <?php echo $this->API->get('menu_type', 'Ny') == 'Nx' ? 'class="Page MenuNx"' : 'class="Page MenuNy"'; ?>>
<?php
$this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
$this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
?>
</div>

<?php endif; ?>

Mas, quando fosse menor que 700px, queria esse:

<aside id="header-mobile-menu-widget" class="widget_mobile-menu">
<span id="header-mobile-menu" href="#"></span>
<div class="header-mobile-menu-wrap displaynone">

<?php if($this->API->get('show_menu', 1)) : ?>
<div id="MainMenu" <?php echo $this->API->get('menu_type', 'Ny') == 'Nx' ? 'class="Page MenuNx"' : 'class="Page MenuNy"'; ?>>
<?php
$this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
$this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
?>
</div>

<?php endif; ?>

</div>
</aside>

Não adianta usar media queries pq o elemento some completamente com display: none;
Queria fazer uma substituição do código de acordo com a largura da página. Se alguém puder me ajudar eu agradeço. Estou começando agora e não sei nada de jquery, javascript...