Was machen Push/Pull-Klassen in einem Grid-System?

Question

Wenn ich mir viele CSS-Grid-Systeme und -Frameworks anschaue, haben sie normalerweise eine standardmäßige Spalten- und Zeilenkonfiguration mit prozentualen Breiten. So etwas wie dies zum Beispiel:

Standardrasterspalte:

.col-10 { 
    width: 83.33333%; 
    width: calc(100%/12 * 10); 
    width: -webkit-calc(100%/12 * 10); 
    width: -moz-calc(100%/12 * 10); } 

jedoch zusätzlich dazu, sehe ich oft andere Klassen wie .push oder .pull. Zum Beispiel wie folgt aus:

Push/Pull-Klassen:

.push-10 { 
    left: 83.33333%; 
    left: calc(100%/12 * 10); 
    left: -webkit-calc(100%/12 * 10); 
    left: -moz-calc(100%/12 * 10); } 

.pull-10 { 
    left: -83.33333%; 
    left: calc(-100%/12 * 10); 
    left: -webkit-calc(-100%/12 * 10); 
    left: -moz-calc(-100%/12 * 10); } 

Ich bin gekommen, Grid-Systeme verwenden ein bisschen, aber ich habe noch nie diese Klassen zu verwenden, benötigt. Wahrscheinlich, weil ich nicht weiß, was sie tun. Also meine Fragen sind:

1. Was ist eine Push-Klasse in der Regel tun?
2. Was macht normalerweise eine Pull-Klasse?
3. Wann möchten Sie jede von ihnen verwenden?
4. Wie verwenden Sie jede von ihnen?
5. Stellen Sie ein Geigenbeispiel zur Verfügung.

Answer 1

Sie dienen zum Neuanordnen von Inhalten. Nehmen wir an, Sie möchten, dass Ihr Inhalt zuerst im HTML-Markup und dann in der Seitenleiste erscheint, aber Sie möchten, dass die Seitenleiste in der Anzeige zuerst angezeigt wird (links) und dann der Inhalt als zweiter (rechts).

Verwendung Bootstrap als Beispiel:

<div class="row"> 
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div> 
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div> 
</div> 

Die col-sm-push-3 Mittel bewegen, um die Spalte 25% von links (left: 25%).

Die col-sm-pull-9 bedeutet, bewegen Sie die Spalte 75% von rechts (right: 75%).

In diesem Szenario wird also die große Spalte "verschoben" die Breite der kleinen Spalte, und die kleine Spalte wird "gezogen" die Breite der großen Spalte.

Demo using Bootstrap

---

Etwas wie folgt:

.push-10 { 
    left: calc(100%/12 * 10); 
} 

Means, nehmen die Breite des Behälters (100%), teilen sie durch die Anzahl der Spalten in dem Gitter (12) und multipliziere es mit der Zahl, um die es geschoben werden soll (10). Sie mit 83.33333333% verlassen.