jquery .on click function don't work on mobile screen

i want on click on the button on mobile screen the card rotateY but on click don't work i don't know why. where i run code in large screen is work perfectly and i don't need that. i need to use it to do flip card in mobile screen only

i try .click() function , .css() function , .on('click',function(){})

    <div class="layout">

        <div class="content">
            <div class="container">

                <div class="row">

                    <div class="offset-lg-2"></div>                        
                    <div class="col-lg-4 mobile-flip-card">
                        <div class="services-description">

                            <h1>HTI Services</h1>

                            <p class="lead">This site provide some 
                             services to HTI,s students</p>

                            <p class="lead">
                                Students can complain about anything they 
                                 want and also can do the questionnaire 
                                 to can access their results
                            </p>
                            <a href="#">Read More</a>
                        </div>
                    </div>            



                    <div class="col-lg-4  mobile-flip-card">

                        <div class="login-form">

                            <h2>Sign <span>In</span></h2>


                            <form action="" method="post">

                                <input type="text" name="username" required placeholder="Username" maxlength="8"/>

                                <input type="password" name="password" required placeholder="Password" maxlength="15"/>

                                <input type="submit" name="submit" value="Sign In">
                            </form>

                            <a href="#">Forget Password!?</a>

                        </div>
                    </div>        

                    <div class="offset-lg-2"></div>
                </div>
            </div>
        </div>
    </div>

    <script>

      $(document).ready(function () {
               'use strict';

     if($('body').outerWidth() < 567)
    {
      $('.mobile-flip-card .services-description a').text('Sign In');


      $('.mobile-flip-card .services-description button').on('click' 
          ,function () {
              $('.content:hover').css('transform',"rotateY(180deg)")
            });
     }else
       {
          $('.mobile-flip-card .services-description a').text('Read 
           More');

       }



    });
    </script>

</body>

there is no error in console