Full width banner and nickname centered in responsive design

In extra.less add.

@media (max-width: @xf-messageSingleColumnWidth)
{
    .message:not(.message--forceColumns)
    {
        .message-name
        {
            text-align: center;
        }

        .message-userTitle,
        .message-userBanner.userBanner
        {
            display: block;
            text-align: center;
            margin: 0;
        }
    }
}

Result: