JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
   
    <!-- Le javascript
    ================================================== -->
    <script src="http://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" data-semver="3.3.2" data-require="bootstrap"></script>

  <body>
    
    <div class="container">
     I like to use the normal button in desktop view
<input type="button"  class="btn-primary hidden-xs" value="Remove Employee" />
</br>

Below is the button to be displayed in a mobile

</br>
<a href="#" class="visible-xs"><i class="glyphicon glyphicon-remove"></i></a>
</br>
Is it possible to achieve this in a single element? 

I mean a big button in desktop and X in mobile.

    </div>
    <!-- /container -->
  </body>

</html>

CSS

body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }