Breaking lines on smaller screen

Question

I am trying to break a line on a certain part, only to be displayed on mobile screens.

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 min-width or max-width does not matter, or it just doesn't do anything.

Here's the code I want to edit:

HTML:

<p class="text">In this line I would like<br class="brnodisplay"> a break on small screen<span>More info</span></p>

CSS:

.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%;
}

Is it even possible to "control" line breaks like this on specific widths/devices? Thank you in advance.

Link:

http://jsfiddle.net/8xddb1h7/

Answer 1

You need to use min-width so on large screen (width >= 768px) the <br> tag will be removed (fiddle - resize the bottom right panel):

@media only screen and (min-width: 768px) { 
.brnodisplay {
    display: none;
}

btw - no need for !important.