CSS-Schalter div Positionen auf Größe ändern

Question

Ich versuche, einige divs basierend auf der Fenstergröße neu positioniert werden, mit @media Deklarationen. Ich kann die ersten Schalter zu arbeiten, mit Ausnahme des großen Raum zwischen dem Behälter 1 und 2.

<div class="container"> 
    <div class="container1"> 
     <div id="a"> 
      A Element 
     </div> 
     <div id="b"> 
      B Element 
     </div> 
    </div> 
    <div class="container2"> 
     <div id="c"> 
      C Element 
     </div> 
     <div id="d"> 
      D Element 
     </div> 
    </div> 
</div> 

Hier wird der JSFiddle Code dafür: https://jsfiddle.net/trout0525/w1frhwub/1/

Ich versuche, die letzte @media zu bekommen um zu diesem Layout zu gelangen, aber den Inhalt des div-Elements gleich zu halten. I.E. reposition die divs/resize sie.

<div class="container"> 
    <div class="container1"> 
     <div id="a"> 
      A Element 
     </div> 
     <div id="c"> 
      C Element 
     </div> 
    </div> 
    <div class="container2"> 
     <div id="b"> 
      B Element 
     </div> 
     <div id="d"> 
      D Element 
     </div> 
    </div> 
</div> 

Hier ist der JSFIDDLE für sie: https://jsfiddle.net/trout0525/w1frhwub/3/

[sicher sein, Ihre Fensterbreiten zu schalten, die Unterschiede zu sehen]

Gibt es eine Möglichkeit mit Flex oder a: vor: nach dem machen das passiert bei einer Größenanpassung?

Hinweis: Ich möchte keine jQuery, nur CSS3 und HTML5 verwenden.

{sorry, habe es nicht gut zeigen, ohne Menschen zu JSFiddle gehen zunächst.}

Answer 1

Man könnte es auf diese Weise tun. Verwenden von Flexbox

.container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -moz-box-orient: vertical; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-align: start; 
 
    -moz-box-align: start; 
 
    -ms-flex-align: start; 
 
    -webkit-align-items: flex-start; 
 
    align-items: flex-start; 
 
} 
 

 
.container1, 
 
.container2 { 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
.container1 { 
 
    background-color: red; 
 
} 
 

 
.container2 { 
 
    background-color: green; 
 
} 
 

 
@media (max-width: 560px) { 
 
    .container2 { 
 
    -webkit-box-ordinal-group: 1; 
 
    -moz-box-ordinal-group: 1; 
 
    -ms-flex-order: 1; 
 
    -webkit-order: 1; 
 
    order: 1; 
 
    } 
 
    .container1 { 
 
    -webkit-box-ordinal-group: 2; 
 
    -moz-box-ordinal-group: 2; 
 
    -ms-flex-order: 2; 
 
    -webkit-order: 2; 
 
    order: 2; 
 
    } 
 
}

<div class="container"> 
 
    <div class="container1"> 
 
     <div id="a"> 
 
      A Element 
 
     </div> 
 
     <div id="b"> 
 
      B Element 
 
     </div> 
 
    </div> 
 
    <div class="container2"> 
 
     <div id="c"> 
 
      C Element 
 
     </div> 
 
     <div id="d"> 
 
      D Element 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

OK, dachte ich, eine Lösung aus. Es ist eine doppelte Pflicht, aber es funktioniert.

Hier ist der HTML:

<div class="container"> 
    <div class="containerA"> 
    <div class="container1A"> 
     <div id="a"> 
     A Element 
     </div> 
     <div id="b"> 
     B Element 
     </div> 
    </div> 
    <div class="container2A"> 
     <div id="c"> 
     C Element 
     </div> 
     <div id="d"> 
     D Element 
     </div> 
    </div> 
    </div> 
    <div class="containerB"> 
    <div class="container1B"> 
     <div id="a"> 
     A Element 
     </div> 
     <div id="c"> 
     C Element 
     </div> 
    </div> 
    <div class="container2B"> 
     <div id="b"> 
     B Element 
     </div> 
     <div id="d"> 
     D Element 
     </div> 
    </div> 
    </div> 
</div> 

und die CSS:

.container { 
    height: 400px; 
    width: 100%; 
    position: absolute; 
} 

.containerA { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

.containerB { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#a { 
    background-color: red; 
} 
#b { 
    background-color: yellow; 
} 
#c { 
    background-color: green; 
} 
#d { 
    background-color: blue; 
} 

@media screen and (max-width: 480px){ 
    .containerA { 
    width: 100%; 
    height: 100%; 
    } 
    .containerB { 
    display: none; 
    } 
    .container1A { 
    width: 100%; 
    height: 50%; 
    } 
    .container2A { 
    width: 100%; 
    height: 50%; 
    } 
    .container1B{ 
    width: 0%; 
    height: 0%; 
    } 
    .container2B { 
    width: 0%; 
    height: 0%; 
    } 
    #a { 
    width: 100%; 
    height: 50%; 
    } 
    #b { 
    width: 100%; 
    height: 50%; 
    } 
    #c { 
    width: 100%; 
    height: 50%; 
    } 
    #d { 
    width: 100%; 
    height: 50%; 
    } 
} 

@media screen and (min-width: 480px) and (max-width: 600px) { 
    .containerA { 
    width: 100%; 
    height: 100%; 
    } 

    .containerB { 
    display: none; 
    } 
    .container1A { 
    width: 100%; 
    height: 50%; 
    } 
    .container2A { 
    width: 100%; 
    height: 50%; 
    } 
    .container1B { 
    width: 0%; 
    height: 0%; 
    } 
    .container2B { 
    width: 0%; 
    height: 0%; 
    } 
    #a { 
    width: 50%; 
    height: 100%; 
    float: left; 
    } 
    #b { 
    width: 50%; 
    height: 100%; 
    float: right; 
    } 
    #c { 
    width: 100%; 
    height: 50%; 
    } 
    #d { 
    width: 100%; 
    height: 50%; 
    } 
} 

@media screen and (min-width: 600px) { 
    .containerA { 
    display: none; 
    } 

    .containerB { 
    width: 100%; 
    height: 100%; 
    } 

    .container1A { 
    width: 0%; 
    height: 0%; 
    } 
    .container2A { 
    width: 0%; 
    height: 0%; 
    } 
    .container1B { 
    width: 50%; 
    height: 100%; 
    float: left; 
    } 
    .container2B { 
    width: 50%; 
    height: 100%; 
    float: right; 
    } 
    #a { 
    width: 100%; 
    height: 66%; 
    } 
    #b { 
    width: 100%; 
    height: 33%; 
    } 
    #c { 
    width: 100%; 
    height: 33%; 
    } 
    #d { 
    width: 100%; 
    height: 66%; 
    } 
} 

Hier ist die JSFiddle:

https://jsfiddle.net/trout0525/w1frhwub/5/