Bootstrap Footer Copyright and Social Media Icons
<p>This is something I've been racking my brain for the past couple of hours and would like some information to help me solve this. With the following row I'm tryin gto figure out how I can do the following.</p>

<p>On a mobile device only put the 6 social media icons across the container on its own line to cover the the entire width of the viewport.</p>

<p>On a mobile device only I would also like to be able to put the copyright information onto its own line to cover the entire width of the viewport.</p>

<pre><code>&lt;footer&gt;
    &lt;div class="container"&gt;
        &lt;div class="row vcenter"&gt;
            &lt;div class="pull-left col-lg-4 col-xs-12"&gt;
                &lt;p&gt;Copyright &amp;copy;2016 by Me&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-4 col-lg-offset-4 col-xs-12"&gt;
                &lt;div class="pull-right"&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-behance-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-linkedin-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-twitter-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-skype fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-facebook-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-github-square fa-icon"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/footer&gt;
</code></pre>