How to make footer responsive using bootstrap
<p>I'm having a problem aligning the footer. At mobile the copyright part is not centered. at ipad it's below the footerlinks. I want it at center at ipad and mobile view while on web it would be on the left side while footerlinks on the right in one row. I'm using bootstrap </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.copyright
 {
  overflow: hidden;
  background: #128cbf ; 
  float: left;
 }
 
 .copyright p
 {
  letter-spacing: 0.1em;
  font-size: 0.50em;
  color: #ffffff;
  font-weight: 300;
 }
 
 
 .footerlinks{
  float: right;
 }

 .footerlinks, .footerlinks a
 {
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.5em;
  color: #ffffff;
  padding: 0 5px;
  font-weight: 200;
 }
 
/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
 .footerlinks { text-align: center; font-size: 1.5em; padding: 0 20px;}
 .copyright { font-size: 1em; }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="row"&gt;
         &lt;div class="footerlinks text-center .col-sm-6 .col-md-5 .col-lg-6"&gt;
         &lt;p&gt;&lt;span&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/span&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&amp;middot;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
      &lt;div class="copyright .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0"&gt;
          &lt;p&gt;&amp;copy; Copyright &amp;middot; All Rights Reserved&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;
            </code></pre>
</div>
</div>
</p>