Collapse 4 bootstrap columns into 2 - html

Question

Considering this footer:
<footer id="footer" class="dark" style="background-color:#220E2F !important;">
<div id="footer-container_k" style="margin: auto; display:block;" class="row">
<div class="col-md-2 col-xs-6 col-md-offset-2" style="position: relative; left:8%;" id="first">
<div class="buffer">
<p>About</p>
<!--<p>Careers</p>-->
<p>Press</p>
<p>Blog</p>
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; left:2%;" id="second">
<div class="buffer">
<p>Contact</p>
<p>Support</p>
<p>Elexa USA</p>
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; right:4%;" id="third">
<div class="buffer">
<p>Z-Wave Products</p>
<a href="https://domeha.com/guardian" target="blank" ><p>Guardian Products</p></a>
<p>How-Tos</p>
<!--<a href="/news" target="blank" ><p>Dome News</p></a>-->
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; right:10%;" id="last">
<div class="buffer">
<a href="https://www.youtube.com/channel/UCuqjZpsNcaWkbH6T1_PTQ3Q" target="blank" ><p>YouTube</p></a>
<a href="https://www.facebook.com/DomeByElexa" target="blank" ><p>Facebook</p></a>
<a href="https://twitter.com/DomeByElexa" target="blank" ><p>Twitter</p></a>
<a href="https://www.linkedin.com/company/16181754"target="blank" ><p>LinkedIn</p></a>
</div>
</div>
</div>
How would I refactor this to collapse into two columns instead of one without positioning them, like I am now? Positioning seems hacky and seems to break very easily.

Answer 1

Remove all the extra styles you added on and they will stack. However the order will be wrong because of the stacking. To reorder try the push and pull approach, mobile first.
http://www.bootply.com/DoMgBuRpDj
<div class="col-md-2 col-xs-6 col-md-push-2" id="third">..</div>
<div class="col-md-2 col-xs-6 col-md-pull-2" id="second">...</div>