title: Breaking lines on smaller screen
body: <p>I am trying to break a line on a certain part, only to be displayed on mobile screens.</p>
  
  <p>What I've accomplished: Either I get a reverse effect where the line is broken on big screens and not on small screens, whether I use <code>min-width</code> or <code>max-width</code> does not matter, or it just doesn't do anything.</p>
  
  <p>Here's the code I want to edit:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p class="text"&gt;In this line I would like&lt;br class="brnodisplay"&gt; a break on small screen&lt;span&gt;More info&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.text {
      transition: all 1s ease;
      text-align: left;
      padding-left: 10%;
  }
  
  .text:hover {
      color: #fff;
      background: black;
  }
  
  .text span {
      display: block;
      float: right;
      clear: both;
      text-align: right;
      padding-right: 10%;
  }
  </code></pre>
  
  <p>Is it even possible to "control" line breaks like this on specific widths/devices? Thank you in advance.</p>
  
  <p>Link:</p>
  
  <p><a href="http://jsfiddle.net/8xddb1h7/" rel="nofollow">http://jsfiddle.net/8xddb1h7/</a></p>