Footer social media icons ordering in mobile

Hi,

I've included the below code (posted by admin for previous questions) in custom.css to display the social media icons on the mobile browser.

@media (max-width: 767px) {
    #copyrights .col_half:last-child {
        display: block;
        margin-top: 30px;
        float: none;
        text-align: center !important;
    }

    #copyrights .col_half:last-child .fright { float: none !important; }

    #copyrights .col_half:last-child .social-icon {
        float: none !important;
        display: inline-block !important;
    }
}

I'm seeing the social media icons below the "Coprights 2014 ...." line. I want the social media icons first and next the "Copyrights .... Terms of Use ..." line. How do I do it?

Thanks,
upa