将4个引导列折叠为2个

Question

考虑到这个脚注：

<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>

我如何重构它，使其不像现在这样，在没有定位的情况下折叠成两列而不是一列呢？定位似乎很麻烦，而且似乎很容易被打破。

Answer 1

删除您添加的所有额外样式，它们将堆叠。然而，由于堆叠，订单将是错误的。要重新排序，尝试推拉法，先移动。

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>