Wie die Flex ändern, wenn

Question

Einwickeln würde Ich mag, etwas zu erreichen, die je nach Bildschirmgröße wie dies macht:

+---------------------------+ 
| A |  B  | C | 
+---------------------------+ 

+---------------+ 
| A | C | 
|  B  | 
+---------------+ 

wenn alle Größe festgelegt ist, kann ich order Eigenschaft mit dem Flex verwalten, sondern Die Größe meines C-Containers ist nicht festgelegt und daher kann ich keine statische Medienabfrage verwenden.

Gibt es einen Weg, dies zu erreichen?

Edit: konnte ich gut genug Annäherung: In einer Medienabfrage alle Bildschirme auswählen, die könnte Notwendigkeit Verpackung, ich die order des B-Behälter groß, und zur gleichen Zeit, um etwas zu ändern, habe ich seine min-width zu 100%, was die Verpackung zwingt.

Answer 1

Sie können b Element in voller Breite mit flex: 0 0 100% und ändern, um order: 2 mit Medien abfragt DEMO

* { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.b { 
 
    background: lightblue; 
 
} 
 
.a, .b, .c { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
    padding: 10px; 
 
} 
 
@media(max-width: 768px) { 
 
    .b { 
 
    flex: 0 0 100%; 
 
    order: 2; 
 
    } 
 
}

<div class="content"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="c">C</div> 
 
</div>

machen