[noypiscripter]

It is impossible without modifying the HTML markup in the template (which is not recommended) because the length of the username is not fixed. But it is possible to put the online icon before the username using pure CSS. Do you only want to do this on small screens?

/* give space for online icon in the username */
.l-small .b-userinfo__details .author { margin-left: 15px; }

/* change the container of the online and signature icons from relative to static to allow online icon to be moved relative to outermost container */
.l-small .b-userinfo__icons { position: static; }

/* move online icon before the username */
.l-small .b-userinfo__icon.online, .l-small .b-userinfo__icon.offline {
    position: absolute;
    left: 83px;
    top: 12px;
}

/* move signature icon to where it was */
.l-small .js-userinfo__signature {
    position: absolute;
    right: 9px;
    top: 9px;
}

This code is based on the Default vB5 Style. Since it looks like you already made some CSS customizations on your site based from your screenshot, you may need to tweak the above CSS to make it work on your end.