Können 2 Spalten von verschachtelten Divs in eine einzelne Spalte zusammengeführt und dann mit CSS neu geordnet werden?

Question

Also, ich bin ziemlich sicher, dass es nicht möglich ist, folgendes zu tun, aber ich dachte, ich würde trotzdem fragen!

Ich habe 2 Spalten Inhalt auf meiner Website Design. Beide haben eine Wrapper div, schweben, so dass sie Seite an Seite sitzen. Das sieht auf dem Desktop-Layout gut aus, und auf dem mobilen (responsiven) Layout füllen sie derzeit beide zu 100% aus und stapeln sich übereinander.

Was ich wirklich tun möchte, ist die Reihenfolge der verschachtelten divs in jedem Floating-Wrapper auf dem mobilen Layout zu ändern, so dass im Wesentlichen die beiden Spalten zu einer einzigen Spalte verschmelzen und die verschachtelten divs Reihenfolge wie folgt:

DESKTOP 
1 5 
2 6 
3 7 
4 8 

MOBILE 
1 
5 
2 
3 
6 
7 
8 
4 

Hoffe, das ist klar genug! Ich weiß, dass ich flexboxes verwenden kann, um die Reihenfolge auf dem mobilen Layout zu ändern, aber so weit wie möglich kann ich die Reihenfolge nur innerhalb jedes einzelnen Wrapper div ändern. Habe auch versucht, verschachtelte Divs auf verschiedene Arten auf dem Desktop-Layout zu schweben, aber ohne Erfolg.

EDIT: Apologies, sollte ich meinen Code eingefügt haben, entweder:

<div id="container"> 
    <div class="wrapper-left"> 
    <div class="divInside div1">1</div> 
    <div class="divInside div2">2</div> 
    <div class="divInside div3">3</div> 
    <div class="divInside div4">4</div> 
    </div> 
    <div class="wrapper-right"> 
    <div class="divInside div5">5</div> 
    <div class="divInside div6">6</div> 
    <div class="divInside div7">7</div> 
    <div class="divInside div8">8</div> 
    </div> 
</div> 

oder

<div id="container"> 
    <div class="wrapper"> 
    <div class="divInside div1">1</div> 
    <div class="divInside div2">2</div> 
    <div class="divInside div3">3</div> 
    <div class="divInside div4">4</div> 
    <div class="divInside div5">5</div> 
    <div class="divInside div6">6</div> 
    <div class="divInside div7">7</div> 
    <div class="divInside div8">8</div> 
    </div> 
</div> 

Auch hier ist ein Bild zu zeigen, was ich bin nach. Entschuldigung, es ist meine erste Frage hier!

Answer 1

Nach dem Feedback auf die Kommentare, ich meine Antwort ändern flexbox und order Eigenschaft verwenden, wie Sie in Ihrer Frage verweisen, die Sie vorher versucht haben. Sie benötigen dafür nicht zwei Wrapper.

html,body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#container{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wrapper{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.red{ 
 
    background-color: red; 
 
} 
 

 
.yellow{ 
 
    background-color: yellow; 
 
} 
 

 
.divInside{ 
 
    border: 1px solid; 
 
    height: 25%; 
 
    width: 50%; 
 
    flex-basis: 49%; 
 
} 
 

 
.div1{ 
 
    order: 1; 
 
} 
 

 
.div2{ 
 
    order: 3; 
 
} 
 

 
.div3{ 
 
    order: 5; 
 
} 
 

 
.div4{ 
 
    order: 7; 
 
} 
 

 
.div5{ 
 
    order: 2; 
 
} 
 

 
.div6{ 
 
    order: 4; 
 
} 
 

 
.div7{ 
 
    order: 6; 
 
} 
 

 
.div8{ 
 
    order: 8; 
 
} 
 

 
@media screen and (max-width: 400px){ 
 
    .wrapper{ 
 
    width: 100%; 
 
    } 
 
    
 
    .divInside{ 
 
    flex-basis: 100%; 
 
    } 
 
    
 
    .div3{ 
 
    order: 4; 
 
    } 
 
    
 
    .div4{ 
 
    order: 8; 
 
    } 
 
    
 
    .div8{ 
 
    order: 7; 
 
    } 
 
}

<div id="container"> 
 
    <div class="wrapper"> 
 
    <div class="divInside div1">1</div> 
 
    <div class="divInside div2">2</div> 
 
    <div class="divInside div3">3</div> 
 
    <div class="divInside div4">4</div> 
 
    <div class="divInside div5">5</div> 
 
    <div class="divInside div6">6</div> 
 
    <div class="divInside div7">7</div> 
 
    <div class="divInside div8">8</div> 
 
    </div> 
 
</div>

Answer 2

Hinweis: Firefox einzige Lösung

Es ist eine experimentelle CSS display Eigenschaft contents, die uns unsere erforderliche Struktur zu haben, ermöglicht aber die jeweiligen Umhüllungen entflechten nach Bedarf.

Ich notiere es hier zu Informationszwecken noch Annahme durch andere Browser.

MDN Reference

Diese Elemente keine bestimmte Box selbst produzieren. Sie werden durch ihre Pseudo-Box und ihre Kind-Boxen ersetzt.

Codepen Demo

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
} 
 
.wrapper { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.red > .divInside { 
 
    background-color: red; 
 
} 
 
.yellow > .divInside { 
 
    background-color: yellow; 
 
} 
 
.divInside { 
 
    border: 1px solid; 
 
    height: 25%; 
 
    width: 100%; 
 
    order: 0; 
 
} 
 
.red .divInside:nth-child(1) {} .red .divInside:nth-child(2) { 
 
    order: 3; 
 
} 
 
.red .divInside:nth-child(3) { 
 
    order: 5 
 
} 
 
.red .divInside:nth-child(4) { 
 
    order: 8 
 
} 
 
.yellow .divInside:nth-child(1) { 
 
    order: 2; 
 
} 
 
.yellow .divInside:nth-child(2) { 
 
    order: 5 
 
} 
 
.yellow .divInside:nth-child(3) { 
 
    order: 6 
 
} 
 
.yellow .divInside:nth-child(4) { 
 
    order: 7 
 
} 
 
@media screen and (max-width: 760px) { 
 
    .wrapper { 
 
    display: contents; 
 
    } 
 
    #container { 
 
    flex-direction: column; 
 
    } 
 
}

<div id="container"> 
 
    <div class="wrapper red"> 
 
    <div class="divInside">1</div> 
 
    <div class="divInside">2</div> 
 
    <div class="divInside">3</div> 
 
    <div class="divInside">4</div> 
 
    </div> 
 
    <div class="wrapper yellow"> 
 
    <div class="divInside">5</div> 
 
    <div class="divInside">6</div> 
 
    <div class="divInside">7</div> 
 
    <div class="divInside">8</div> 
 
    </div> 
 
</div>

Answer 3

Es wäre einfach, diese zu lösen, wenn Sie die HTML in eine CSS-Tabellenstruktur festgelegt (display:table-row; und display:table-cell;) die gewünschten Werte für das Desktop-Format einstellen .

Dann Medienabfragen verwenden Sie nur diese Objekte auf dem Desktop Größe festgelegt, und wenn es um mobile Größe geht, wird es eine auf dem anderen stapeln:

.main > div > div { 
 
    border: 1px solid silver; 
 
} 
 

 
@media (min-width: 400px) { 
 
    .main { 
 
    display: table; 
 
    width: 100%; 
 
    } 
 
    .main > div { 
 
    display: table-row; 
 
    } 
 
    
 
    .main > div > div { 
 
    display: table-cell; 
 
    } 
 
}

<div class='main'> 
 
    <div> 
 
    <div>1</div> 
 
    <div>5</div> 
 
    </div> 
 
    <div> 
 
    <div>2</div> 
 
    <div>6</div> 
 
    </div> 
 
    <div> 
 
    <div>3</div> 
 
    <div>7</div> 
 
    </div> 
 
    <div> 
 
    <div>4</div> 
 
    <div>8</div> 
 
    </div> 
 
</div>