Texte différent sur version mobile et web

<p id="change">ecran plus grand de 600 px</p>
<script>
var w = document.documentElement.offsetWidth;
var elem = document.getElementById("change");
if ( w < 600 ) { elem.innerHTML="ecran plus petit que 600px";}
</script>

<p class="mob">ecran plus petit que 600 px</p>
<p class="nonmob">ecran plus grand que 600 px</p>
<p class="mob">version mobile</p>
<p class="nonmob">version ordinateur</p>
<p> Ici le texte pour toutes les versions</p>
<script>
var w = document.documentElement.offsetWidth;
var mobile = document.getElementsByClassName("mob");
var nonmobile = document.getElementsByClassName("nonmob");
if (w > 600) {for(var i = 0; i < mobile.length; i++) {
    mobile[i].style.display = 'none';
}}
else {for(var i = 0; i < nonmobile.length; i++) {
    nonmobile[i].style.display = 'none';
}}
</script>