jquery - How to change content of a given paragraph based on the width of viewport (i.e dynamic content replacement) -

how can change content of given paragraph when browser width resized? example, on mobile version of website paragraph class '.main-lead' have following content:

<p class="main-lead">some content goes here.</br>and content goes here</p> 

now, when views page tablet or laptop, content of paragraph changed so:

<p class="main-lead">previous content has been replaced.</p> 

i sort of understand need using jquery, , have attempted write script task:

jquery(window).resize(function () {     if ($(window).width() > 768) {         // if screen width more 768px         $(".main-lead").html('previous content has been replaced.');     } }); 

it seems work, if user decides resize screen mobile view, content remain same on tablet , desktop version instead of mobile version.

thus, content of paragraph dynamically change when browser window being resized , forth.

any suggestions highly appreciated. thanks.

you can try css code.

<style> .mobile { display:none; } @media screen , (max-width:768px) {  .desktop { display:none; } .mobile { display:block; }  }  </style> <p class="main-lead">     <span class="desktop">some content goes here.</br>and content goes here</span>     <span class="mobile">previous content has been replaced.</span> </p>