Bootstrap, wie ändert man die Reihenfolge der Spalten beim Stapeln der Elemente?

Question

Ich habe eine Fußzeile, die wie folgt aussieht:

Mit diesem Code:

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

auf Smartphones die Reihenfolge der Fußzeile Artikel wird:

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

Aber Ich muss die Reihenfolge beim Abstecken ändern, so:

FAQ 
CONTACTEZ 
ACTUALITES 
MENTIONS LEGALES 
CGV 
Copyright 2017 SoContact 

Ich habe versucht, mit col-sm-push und pull zu spielen, aber ich kann nicht die richtige Kombination finden?

Irgendwelche Hinweise?

Danke

Answer 1

Sie die Reihenfolge der Spalten mit push and pull ändern können.

Mit Bootstrap 4 ist dies push-viewport-unit/pull-viewport-unit geworden.

Das ist nicht meine stärkste Seite, aber ich denke, in Ihrem Fall wäre es:

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