JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="col-xs-3 col-sm-3">
    <button type="button" class="btn btn-default btn-md btn-block btn-responsive"><i class="fa fa-plus"></i><span> Add New Item</span></button>
    <button type="button" class="btn btn-default btn-md btn-block btn-responsive"><i class="fa fa-plus"></i><span> Test</span></button>
</div>

CSS

@media only screen and (max-width: 767px) {
    button {
        content: '<i class="fa fa-plus"></i>';
    }
}

JavaScript

function resizeButtons() {
    $(".btn-responsive").each(function () {
        var innerWidth = $(this).find("i").width() + $(this).find("span").width();
        if(innerWidth > $(this).width()) {
            $(this).find("span").addClass("hidden");
        }else{
            $(this).find("span").removeClass("hidden");
        }
    });
}

$(document).ready(resizeButtons);
$(window).resize(resizeButtons);