Centering footer text on bootstrap - html

Question

Hey guys im having an issue here with my footer when resize the screen / on mobile. My footer text is placed to the left and my ul's are maligned. I attached my code bellow, im looking to keep the same layout on desktop but when the screen shrinks have the footer text align center with the layout but keep the same text styling as well so the uls and li's line up with text-align:left;
https://s32.postimg.org/glxnik7gl/footer.png
HTML:
<footer>
<div class="container" id="contact">
<div class="row">
<div class="col-sm-3">
<a class="navbar-brand" href="#"><span class="logo-text-footer">Company Logo</span></a>
</div>
<div class="col-sm-3">
<ul>Quick Links</ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<div class="col-sm-3">
<ul>Address</ul>
<li>1234 Example Street </li>
<li>City</li>
<li>State</li>
<li>55555</li>
</div>
<div class="col-sm-3">
<li>Call: 555-555-5555</li>
<li>E-Mail: example#gmail.com</li>
<div class="social-icons">
<li>Facebook</li>
<li>YouTube</li>
<li>Instagram</li>
<li>Twitter</li>
</div>
</div>
</div>
<div class="row">
<div class="privacy">
<p>
<?php echo date("Y"); ?> Company Name | All Rights Reserved</p>
</div>
</div>
</div>
</footer>
CSS:
/* Footer */
footer {
height: auto;
background: #3a526a;
}
footer #contact {
height: auto;
min-height: 13em;
}
footer .contact-text {
position: relative;
top: 20em;
}
span.logo-text-footer {
color: #fff;
font-size: 30px;
vertical-align: top;
position: absolute;
bottom: 15px;
}
footer #contact ul {
font-size: 17px;
color: #fff;
text-transform: uppercase;
font-family: 'Myriad Pro';
padding: 0;
}
footer #contact li {
color: #fff;
list-style: none;
font-family: 'Myriad Pro';
padding-top: 5px;
}
footer .social-icons li {
display: inline-block;
}
footer .privacy {
height: 50px;
background: #455e76;
}
footer .privacy p {
color: #fff;
text-align: center;
display: block;
margin: auto;
line-height: 50px
}

Answer 1

Add text-center class in footer. Change col-sm-3 class to col-md-3 col-sm-12 in each div. As this is for mobile view, add following CSS:
#media (max-width: 768px) {
footer {
text-align: center;
}
.navbar-brand {float:none;}
}
Check jsFiddle here.

Answer 2

Alignment in bootstrap is very easy so just you know about some class name like text-center to make alignment in center position, text-right to make alignment in right position, text-left to make alignment in left position.
In your code you are using ul and li but for making responsive design to avoid ul and li . So you can use always work with only div.