Re-ordering div mit CSS

Ich möchte einige div nur mit CSS nachbestellen, wenn möglich. Hier ist die HTML-Probe I neu zu bestellen will:Re-ordering div mit CSS

<div class="block1"> 
    Block1 
</div> 
<div class="block2"> 
    <div class="subblock1">S-Block1</div> 
    <div class="subblock2">S-Block2</div> 
    <div class="subblock3">S-Block3</div> 
</div>

Und das ist das grafische Ergebnis Ich mag:

S-Block1 
S-Block2 
Block1 
S-Block3

Ich habe bereits versucht mit display: flex; und order: X aber ohne Erfolg zu spielen. Das Hauptproblem liegt in der Tatsache, dass ich die block2 vor und nach der block1 teilen möchte. Die flex Anzeige erlaubt mir nur, die Reihenfolge des Blocks der gleichen "Ebene" zu ändern.

Ich würde wirklich gerne eine Lösung haben, die nicht JavaScript verwendet, um das DOM neu zu schreiben (indem ich subblock3 nehme und es woanders hinstelle, um mein CSS zufriedenzustellen) wenn möglich.

Quelle

2016-07-08 Benoît Latinier

Es gibt keine CSS-Lösung dafür, nicht einmal Flexbox. –

Warum brauchen Sie die 2 Elternblöcke? – LGSon

Sie könnten es fälschen, indem Sie Speicherplatz hinzufügen und jeden Block manuell in derselben Medienabfrage platzieren, in der Sie die Reihenfolge ändern wollten, aber das wird keine zuverlässigen Ergebnisse liefern. Dies würde erfordern, dass JS richtig handelt. – TylerH

Es erscheint das ist nicht möglich und Javascript ist keine Option für mein Problem.

Hier ist der Beispielcode, den ich verwendet habe (jQuery benötigt).

$(".subblock2").prependTo(".form-wrapper"); 
$(".subblock1").prependTo(".form-wrapper");

Quelle

2016-08-09 22:01:04

Re-ordering div mit CSS

Antwort

Verwandte Themen