Die Reihenfolge der LI-Elemente nur mit CSS ändern

Question

Ich muss eine bestehende Seite aktualisieren, wenn CSS bereits vorhanden ist. Ich darf den vorhandenen HTML NICHT berühren. Meine einzige Option besteht darin, einen anderen CSS/CSS3-Code zu erstellen, um den bestehenden zu überschreiben. Kein JS. Keine JQuery.

Unten ist ein Beispiel vorhandenes HTML. Meine Zielausgabe besteht darin, eine CSS/CSS3-Code-Überschreibung zu erstellen, um die Position umzukehren, wodurch die "zweite" Klasse als erste in der Bestellliste erscheint.

Ich begann zu googeln, aber ich konnte keine guten Ressourcen finden. Also ich dachte nur, dass es vielleicht ein CSS3 Code sein, der diese wie die CSS-Code tun könnte, die ich weiter unten vorgestellt:

HTML:

<ul id="mainList"> 
    <li class="first">i am first</li> 
    <li class="second">i am second</li> 
    <li class="third">i am third</li> 
</ul> 

Aus dieser Welt CSS-Code:

.second { 
    list-position: rank(1); 
} 
.first { 
    list-position: rank(2); 
} 

Alle Vorschläge werden sehr geschätzt.

Fiddle hier ->http://jsfiddle.net/philcyb/mL41up6t/

Answer 1

Sie konnten die Kinder li Elemente machen flexbox items und dann die order property verwenden, um die visuelle Ordnung des Elements zu ändern (s).

In diesem Fall könnten Sie dem zweiten Element einen order Wert von -1 geben, so dass es zuerst erscheint.

Updated Example

#mainList { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.second { 
 
    order: -1; 
 
}

<ul id="mainList"> 
 
    <li class="first">I am first</li> 
 
    <li class="second">I am second</li> 
 
    <li class="third">I am third</li> 
 
</ul>

Browser-Unterstützung found here sein kann. Sie haben Ihre Frage mit css3 getaggt, daher bezweifle ich, dass die Browser-Unterstützung ein Problem darstellt, wenn man bedenkt, dass sie sich derzeit bei ~ ~ 93,03% für Flexboxen befindet.

---

Als Randbemerkung, können Sie dort auch von :nth-child/:nth-of-type machen, um das li Element durch seinen Index zu wählen, anstatt Klassen verwenden.

#mainList { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#mainList li:nth-of-type(2) { 
 
    order: -1; 
 
}

<ul id="mainList"> 
 
    <li>I am first</li> 
 
    <li>I am second</li> 
 
    <li>I am third</li> 
 
</ul>

Answer 2

Josh Antwort ist perfekt! Nur eine zusätzliche Anmerkung, die ich gerade verwendet habe: Für die Kompatibilität von Mobilgeräten (z. B. iPhone) und anderen Browsern habe ich die folgenden CSS-Codes hinzugefügt, damit es kompatibler funktioniert.

#mainList { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    -webkit-box-orient: vertical; 
    flex-direction: column !important; 
} 
#mainList li:nth-of-type(2) { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
} 
#mainList li:nth-of-type(1) { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
}