Pokaż tekst zastępczy jako etykietę na pulpicie

Question

Chcę wyświetlić symbol zastępczy w widoku mobilnym i ukryć symbol zastępczy w widoku pulpitu. Jak mogłem to zrobić?

Koniec iNAND mobile widok powinien wyglądać następująco:

i widok mobilny powinien wyglądać następująco:

<input type="text" placeholder="Name">

Answer 1

z jQuery:

$(document).ready(function(){ 
 
    $(window).resize(function(){ 
 
     var wid = $(this).width(); 
 
     if((wid > 300) && (wid < 400)) { 
 
      $('input[type="text"]').attr('placeholder','name'); 
 
      $('label').hide(); 
 
     } 
 
     else { 
 
      $('input[type="text"]').attr('placeholder',''); 
 
      $('label').show(); 
 
     } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<label>Enter Name:</label> 
 
<input class="int" type="text"/>