Gesamte Seite mit CSS Flexbox neu anordnen

Question

Ich muss die Reihenfolge meiner gesamten Seite für mobile Geräte mit Flex ändern. Ich kann das innerhalb des einzelnen Containers arbeiten, aber ist es möglich, es mit allen Containern auf der Seite zu machen? Hier ein Beispiel:

.outer { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#a { 
 
    order: 4; 
 
    background: #ccc; 
 
} 
 
#b { 
 
    order: 1; 
 
    background: #aaa; 
 
} 
 
#c { 
 
    order: 3; 
 
    background: #d33; 
 
} 
 
.one { 
 
    order: 2; 
 
    background: #aaa; 
 
} 
 
.two { 
 
    order: 5; 
 
    background: #aaa; 
 
}

<div class="outer"> 
 
    <div id="flex"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
    </div> 
 
    <div id="flex2"> 
 
    <div class="one">Show me 2nd</div> 
 
    <div class="two">Show me 5th</div> 
 
    </div> 
 
</div>

Die 'Show me 2.' und 'Zeig mir 5.' sitzen gerade am Ende eher als in der neuen Ordnung. Zur Bestätigung kann der HTML-Code nicht geändert werden.

JsFiddle

Answer 1

Sie können nicht einen Auftrag mit Flex auf Elemente anwenden, die nicht den gleichen Behälter teilen:

Die ‚Ordnung‘ Eigenschaft der Reihenfolge ihrer in denen innerhalb flex Elemente erscheinen steuert flex container, indem Sie sie Ordnungsgruppen zuweisen.

Soucre

Sie können Ihre HTML-Struktur ändern, so dass alle Elemente den gleichen Behälter, teilen und dann wird die Bestellung der Regel arbeiten.

Answer 2

über jquery können Sie clone() und remove() bis display:contents zu den Standards kommt.

Eigentlich usable in Firefox zu Testzwecken (fiddle).

$('#flex2 > div, #flex > div').clone().insertAfter('#flex2'); 
 
$('#flex2 , #flex').remove();

.outer { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#a { 
 
    order: 4; 
 
    background: #ccc; 
 
} 
 
#b { 
 
    order: 1; 
 
    background: #aaa; 
 
} 
 
#c { 
 
    order: 3; 
 
    background: #d33; 
 
} 
 
.one { 
 
    order: 2; 
 
    background: #aaa; 
 
} 
 
.two { 
 
    order: 5; 
 
    background: #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div id="flex"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
    <div id="c">C</div> 
 
    </div> 
 

 
    <div id="flex2"> 
 
    <div class="one">Show me 2nd</div> 
 
    <div class="two">Show me 5th</div> 
 
    </div> 
 

 
</div>