How do you prevent white space from being removed after line breaks within a Rich Text Field?
Unfortunately you can't really configure how Redactor formats it's input. Given this I think your current solution is the most effective.

That said, you could try this alternative style for your &lt;br&gt; tags when hiding:

br.hide-for-small {
    content: '';
    display: inline-block;
    width: 1ch;
}


This will collapse the line break with an added space. It'll only work on Safari and Chrome though. That might be good enough since most mobile users are using Webkit-based browsers.