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="less">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button>
</div>
<div class="more">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

.less {
        display:none;
    }
@media (max-width: 300px) {
    .less {
        display:block;
    }
    .more {
        display:none;
    }
}