Bootstrap Footer Column/Row issue - html

Question

I have a footer on a Bootstrap website, which has 4 items in columns in its row - this display's correctly on desktop screens.
For mobile screen's I want it to change it to display 2 items, with the other 2 items below this - and the formatting of 1 item is all screwy.
Here's an image of the Footer on a desktop.
And here's an image of the footer for a small screen (i.e: mobile)
In the small screen image, the "accredited" image should be somewhat inline with the "We're Social" lines of text, and not below it.
Ive tried changing the column sizes (i.e: making "Accredited" = col-xs-7 & col-sm-7 and "We're Social" = col-xs-5 & col-sm-5), but its made no difference.
any suggestions as to where the issue lies?
Here's the HTML code for my footer:
<!-- ========= START FOOTER ========== -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-3">
<a href="http://www.acnc.gov.au/" target="_blank">
<img class="img-responsive center-block" src="images/ACNC-Charity-Logo.png" alt="ACNC Charity" width="150" height="150"></a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-3 text-center">
<h4><strong>Contact Us</strong></h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> 67-71 Strathallan Rd, Macleod, Victoria</li>
<li><i class='glyphicon glyphicon-phone'></i> [phone]</li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:office#openhousecic.org.au'>office#openhousecic.org.au</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-6 col-lg-3 text-center">
<h4><strong>We're Social</strong></h4>
<ul class='list-unstyled'>
<li>Facebook</li>
<li>YouTube</li>
<li>LinkedIn</li>
<li>Flickr</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6 col-lg-3">
<!--<div class="blank-gap-20"></div>-->
<a href="http://www.qip.com.au/" target="_blank">
<img class="img-responsive center-block" src="images/QIP-logo.png" alt="QIP logo" width="150" height="83"></a>
</div>
</div> <!-- End Row -->
<div class="row">
<div class="col-sm-12 col-md-12 text-center">
<span>Open House Christian Involvement Centres © 2017 : Website by Bliss</span>
<div class="blank-gap-10"></div>
<p><i>We acknowledge and pay respect to the Traditional Owners of the lands upon which Open House Christian Involvement Centres are situated.</i><p>
</div>
</div> <!-- End row -->
</div> <!--- End Container -->
</footer>
And my site is using the 'Sticky-Footer' CSS for Bootstrap;
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 330px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 10px;
/* Set the fixed height of the footer here */
height: auto;
min-height:200px;
background-color: #f1eeee;
color: #333
/*color: #f9f9f9;*/
}

Answer 1

You need to use a responsive reset as the columns are different height because of the content is each column. Here is a similar question.
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-3">
..
</div>
<div class="col-xs-6 col-sm-6 col-lg-3 text-center">
..
</div>
<div class="visible-sm visible-xs clearfix"></div>
<div class="col-xs-6 col-sm-6 col-lg-3 text-center">
..
</div>
<div class="col-xs-6 col-sm-6 col-lg-3">
..
</div>
</div>
http://www.codeply.com/go/m5nWYTYa4H