Evitare che un div con proprietà "float" vada a capo

[Abri]

Buongiorno, sto realizzando un sito responsive (uso Bootstrap), ma ho un problema su un elemento.

Questa la parte di sito interessata:

desktop.jpg
Su mobile la sezione si comporta così:
mobile.jpg
Io vorrei che l'icona con la foto di ogni persona rimanesse sempre a sinistra, anche in presenza di un nome molto lungo.

Al momento icona e testi sono in due div separati con proprietà float:left.
Avrei usato col-xs-1 (o 2) e col-xs-10 (o 11) ma su desktop la colonna contenente le icone/foto diventa troppo larga.

Questo il codice di una sezione:

<div class="row">
   <div class="colonna col-sx">
     <img class="profile-pic" src="img/foto.jpg">
   </div>
   <div class="colonna col-dx">
     <p class="testo-tipo-1">Nome Cognome <small class="text-muted">
     <br class="visible-xs"><a href="#"> dettagli</a></small><br>
     <span class="testo-piccolo">testo piccolo</span></p>
     <p> <span class="testo-tipo-2 text-uppercase">gruppo </span> </p>
     <button type="button" class="bottone"><small>bottone &gt;</small></button>
   </div>
</div>

Come posso procedere per far si che l'icona/foto rimanga sempre a sinistra del blocco di testo anche su viewport strette?

[edit] ho fatto confusione scrivendo il titolo: NON voglio che vada a capo. Il titolo del thread dovrebbe essere "Evitare che un div con proprietà float vada a capo". Scusate... ^^;