Collapse 4 Bootstrap-Spalten in 2

Question

In Anbetracht dieser Fußzeile:

<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"> 
      <a href="/about"><p>About</p></a> 
      <!--<a href="/careers"><p>Careers</p></a>--> 
      <a href="/press"><p>Press</p></a> 
       <a href="/blog"><p>Blog</p></a> 
      </div> 
     </div> 
     <div class="col-md-2 col-xs-6" style="position: relative; left:2%;" id="second"> 
      <div class="buffer"> 
      <a href="/contact"><p>Contact</p></a> 
      <a href="https://support.domeha.com/hc/en-us" target="_blank"><p>Support</p></a> 
      <a href="http://www.elexausa.com/" target="_blank"><p>Elexa USA</p></a> 
      <a href="#" id="footer_modal_button"></a> 
      </div> 
     </div> 
     <div class="col-md-2 col-xs-6" style="position: relative; right:4%;" id="third"> 
      <div class="buffer"> 
      <a href="/shop"><p>Z-Wave Products</p></a> 
      <a href="https://domeha.com/guardian" target="blank" ><p>Guardian Products</p></a> 
      <a href="/how-tos"><p>How-Tos</p></a> 
      <!--<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> 

Wie würde ich Refactoring diese sie ohne Positionierung statt einer in zwei Spalten kollabieren, wie ich jetzt bin? Die Positionierung scheint hacky und scheint sehr leicht zu brechen.

Answer 1

Entfernen Sie alle zusätzlichen Stile, die Sie hinzugefügt haben, und sie werden gestapelt. Allerdings wird die Reihenfolge wegen der Stapelung falsch sein. Um zu versuchen, versuchen Sie die Push-und Pull-Ansatz, zuerst Handy.

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>