Show placeholder text as label in Desktop [duplicate]

Question

I want to show placeholder in mobile view and hide placeholder in desktop view. How could I do this?

End inAnd mobile view should look like this:

<label>Enter Name:</label>
<input type="text"/>

And mobile view should look like this:

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

Answer 1

With 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"/>