How to change align when resizing with Boostrap? - html

Question

I have the following footer below using bootstrap:
.align-center {
text-align: center;
}
#footer {
background-color: #3c3d41;
color: white;
padding-top: 25px;
padding-bottom: 10px;
}
.footer-social-media-text {
text-decoration: none;
height: 25px;
color: white;
white-space: nowrap;
}
.footer-social-media-icon {
padding-right: 8px;
margin-left: 30px;
margin-right: 2px;
font-weight: bold;
height: 25px;
color: white;
}
#footer a {
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
}
#footer a:hover {
text-decoration: none;
color: greenyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="https://www.mycompany.com/" class="footer-social-media-text">
<i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
</a>
</div>
<div class="col-md-9">
<a href="https://www.facebook.com" class="footer-social-media-text pull-right">
<i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
</a>
<a href="https://www.instagram.com" class="footer-social-media-text pull-right">
<i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
</a>
<a href="https://twitter.com" class="footer-social-media-text pull-right">
<i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
</a>
</div>
</div>
<hr />
<p class="align-center">© 2017 My Company</p>
</div>
</footer>
</div>
</div>
https://jsfiddle.net/coyagf2b/
My issue is the code above is that the width threshold using the bootstrap grid does not really match my expectation: <div class="col-md-3"> and <div class="col-md-9">.
Basically I would like to:
Having the right part stacking below the left part when it's the page width is heavily reduced I tried different col-md-x / col-lg-x / col-sm-x without much result...
Change the content align of the two parts to center when the right part is stacking below
How can I do that?

Answer 1

Bootstrap's col-xs- classes do work perfectly find with your code. If you want the right column to fall underneath the left then I would just add col-xs-12 on each of the col-md- divs you have. And you center only on mobile you can use some media queries to achieve that. Something like looks like:
#media (max-width: 991px){
.centerSection{
text-align:center;
}
}
#media (min-width: 992px){
.rightSection {
float:right;
}
}
And here is a link to a working codepen:
https://codepen.io/egerrard/pen/rGrPmM

Answer 2

Check this example, using .text-center, .float-md-left and .float-md-right.