title: Change button text automatically when screen is resized with Bootstrap 3
body: <p>Consider this codes:</p>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;button type="button" class="btn btn-default btn-md btn-block"&gt;
    &lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add New Item&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
  </p>
  
  <pre><code>@media only screen and (max-width: 767px) {
      button {
          content: '&lt;i class="fa fa-plus"&gt;&lt;/i&gt;';
      }
  }
  </code></pre>
  
  <p>If you resize the screen horizontally, at some moment the text will get out of the button.</p>
  
  <p>I want to know if is possible to change the button text automatically when the horizontal screen resizes. Something like "+ Add New Item" to only the plus signal "+" in small devices.</p>
  
  <p>I'm a little noob with media queries, so I think I'm missing something or doing it wrong.</p>
  
  <p>Can someone help me?</p>
  
  <p>I made this <a href="http://jsfiddle.net/ogt84jds/" rel="noreferrer"><strong>fiddle</strong></a> for it.</p>