Verschieben div nach oben für kleine Bildschirme

Question

Ich habe ein Layout, das für PC-Bildschirme und Smartphones ein bisschen anders aussehen sollte.

Layout 1: 
|1 | 2  | 
|3 | 4 |5 | 
|6 | 7 |8 | 

Layout 2: 
|4| 
|1| 
|2| 
|3| 
|5| 
|6| 
|7| 
|8| 

Sie können sehen, dass innerhalb Layouts 2 die div (oder in diesem Beispiel Artikeln) nach oben bewegen soll, mit dem anderen divs unten.

Wie kann das gemacht werden, wenn ich plain HTML + CSS dafür verwenden möchte, kein JS/jQuery ....!?

Fiddle ist hier richtig: https://jsfiddle.net/SchweizerSchoggi/vsn8nod7/ Die grüne div derjenige ist, die auf der Oberseite in mobilen Layout sitzen sollte, wie es den Beschreibungstext der Seite enthält, enthalten die anderen divs nur Bilder.

Answer 1

Was ich vorschlagen würde, ist die Verwendung des Bootstrap-Grids, da es das Arbeiten mit Grids so viel einfacher macht.

@media screen and (min-width: 400px) { 
    #div4a { 
     display: none; 
    } 
} 
@media screen and (max-width: 399px) { 
    #div4b { 
     display: none; 
    } 
} 

hoffe, das hilft ein wenig:

Wenn Sie nicht Bootstrap verwenden möchten, können Sie Medienanfragen in Ihrem CSS zu verstecken oder zeigen ein div je nach Bildschirmgröße verwenden.

Answer 2

Flexbox kann das tun:

Codepen Demo

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    width: 50%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.child { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    background: pink; 
 
    flex: 0 0 33.33%; 
 
    text-align: center; 
 
    border: 1px solid grey; 
 
    order: 1; 
 
} 
 
.wider { 
 
    flex: 0 0 66.66%; 
 
} 
 
@media (max-width: 600px) { 
 
    .child { 
 
    flex: 0 0 100%; 
 
    } 
 
    .topper { 
 
    order: 0; 
 
    background: orange; 
 
    } 
 
}

<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child wider">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child topper">4</div> 
 
    <div class="child">5</div> 
 
    <div class="child">6</div> 
 
    <div class="child">7</div> 
 
    <div class="child">8</div> 
 
</div>

Answer 3

Sie den gleichen Code in Ihre Geige mit einer kleinen Änderung

zu

@media screen and (max-width: 480px) { 
    #content { 
     width: auto; 
     position: relative; 
     top: 0; 
     margin: 20px 0; 
    } 
    article#pic4 { 
     position: absolute; 
     top: 0; 
     height: auto; 
    } 
    article#pic1{ 
     margin-top: 18px; 

} 

}