Bootstrap，如何在堆叠元素时更改cols的顺序？

Question

我有一个看起来像这样的页脚：

使用此代码：

<div class="row" style="font-size: 70%;padding-bottom:1%;margin-bottom:1%;">

    <div class="col-lg-offset-1 col-lg-2" style="color:grey">
      Copyright 2017 SoContact
    </div>


    <div class="col-lg-offset-2 col-lg-2" style="padding-right: 0px;margin-right: 0px;">
      <a href="mentions.php" style="color:grey">MENTIONS LEGALES</a>
    </div>

    <div class="col-lg-1" style="padding-left: 0px;margin-left: 0px;">
      <a href="cgv.php" style="color:grey">CGV</a>
    </div>

    <div class="col-lg-1" style="padding-left: 0px;margin-left: 0px;">
      <a href="faq.php" style="color:grey">FAQ</a>
    </div>

    <div class="col-lg-1" style="padding-left: 0px;margin-left: 0px;">
      <a style="color:grey">actualités</a>
    </div>

    <div class="col-lg-2" style="padding-left: 0px;margin-left: 0px;">
      <span class="glyphicon glyphicon-envelope"></span> &nbsp;<a style="color:grey">CONTACTEZ-NOUS</a>
    </div>
    <br>

</div>

在智能手机上，页脚项目的顺序为：

Copyright 2017 SoContact
MENTIONS LEGALES
CGV
FAQ
actualités
CONTACTEZ-NOUS 

但我需要在赌注时改变顺序，如：

FAQ
CONTACTEZ
ACTUALITES
MENTIONS LEGALES
CGV
Copyright 2017 SoContact

我曾尝试使用col-sm-push和pull，但我找不到合适的组合？

有任何线索吗？

谢谢

Answer 1

您可以使用push and pull更改列的顺序。

使用Bootstrap 4，这已成为push-viewport-unit / pull-viewport-unit。

这不是我最强烈的观点，但我认为在你的情况下会是：

<div class="row" style="font-size: 70%;padding-bottom:1%;margin-bottom:1%;">

    <div class="col-lg-2 push-lg-10" style="color:grey">
      Copyright 2017 SoContact
    </div>


    <div class="col-lg-2 push-lg-4" style="padding-right: 0px;margin-right: 0px;">
      <a href="mentions.php" style="color:grey">MENTIONS LEGALES</a>
    </div>

    <div class="col-lg-1 push-lg-4" style="padding-left: 0px;margin-left: 0px;">
      <a href="cgv.php" style="color:grey">CGV</a>
    </div>

    <div class="col-lg-1 pull-lg-4" style="padding-left: 0px;margin-left: 0px;">
      <a href="faq.php" style="color:grey">FAQ</a>
    </div>

    <div class="col-lg-1 pull-lg-2" style="padding-left: 0px;margin-left: 0px;">
      <a style="color:grey">actualités</a>
    </div>

    <div class="col-lg-2 pull-lg-5" style="padding-left: 0px;margin-left: 0px;">
      <span class="glyphicon glyphicon-envelope"></span> &nbsp;<a style="color:grey">CONTACTEZ-NOUS</a>
    </div>
    <br>

</div>