Line break for media-query only?

If using Bootstrap:

<br class="visible-xs">

Mobile first, hide the br, then set the display back to initial on larger screens:

<br class="hide desktop-show">

the css:

.hide {
    display: none;
}

@media (min-width: 64em) {
    .desktop-show {
        display: initial;
    }
}

You could simply add a class to the BR tag and set it to be display:none by default.

Then in your mobile media query set it to "display: static"

I've suggested static rather than block because I don't think that a BR tag is display block by default so probably best to simply go with static.

You could just use floats, that way you never need to even think about where the snapping point needs to be. It either displays both next to each other, or instantly snaps to the next line if they don't fit.

span {
    display: block;
    float: left;
    margin-right: 0.4em;
}

jsFiddle: http://jsfiddle.net/e4mWK/