Ändern der Reihenfolge der HTML-Element abhängig von der Bildschirmgröße

Question

Wie ändern Sie die Reihenfolge der HTML-Elemente basierend auf der Größe des Bildschirms?

Zum Beispiel auf großen Bildschirm wie Desktops, wäre die Reihenfolge wie folgt sein:

element1 element2 element3

Wenn dies jedoch am Telefon zu sehen, wäre es nicht die Breite passen des Bildschirms. Also, ich möchte es so aussehen:

element2
element1
element3

Da Div2 die Haupt div ist, würde Ich mag es, auf großen Bildschirmen auf der Mitte zu sein und oben auf Smartphone-Bildschirmen.

Ich verwende Foundation als das Framework für die Website.

Hier ist ein Beispielcode:

<div id="container" class="row medium-up-3"> 
    <div id="element1" class="column column-block"> 

    </div> 
    <div id="element2" class="column column-block"> 

    </div> 
    <div id="element3" class="column column-block"> 

    </div>  
</div> 

ich HTML und CSS viel Zeit verbracht haben, zu lernen, so dass alles, was ich weiß, um wirklich eine Website zu machen. Ich habe geplant, Javascript zu lernen, also wäre es in Ordnung, wenn die Lösung es erfordert.

Answer 1

Hier ist die CSS Art und Weise, Flexbox mit (einen Blick auf this guide nehmen Sie mit Flexbox den ersten Schritten helfen):

flex-direction ist entweder row oder column (je nachdem, wie Sie Ihre Elemente fließen wollen)

ihre Reihenfolge ändern mit order (mit order: 1 auf # element2 wird es am Ende setzen)

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#element2 { 
 
    order: -1; 
 
}

<div id="container" class="row medium-up-3"> 
 
    <div id="element1" class="column column-block"> 
 
    #1 
 
    </div> 
 
    <div id="element2" class="column column-block"> 
 
    #2 
 
    </div> 
 
    <div id="element3" class="column column-block"> 
 
    #3 
 
    </div> 
 
</div>

Answer 2

Sie einfach einfach Klasse Medium-Up-12 statt Klasse für Container-ID. Goo Glück.

<div id="container" class="row medium-up-12"> 
 
    <div id="element1" class="column column-block"> 
 
    #1 
 
    </div> 
 
    <div id="element2" class="column column-block"> 
 
    #2 
 
    </div> 
 
    <div id="element3" class="column column-block"> 
 
    #3 
 
    </div> 
 
</div>

Answer 3

Hier ist eine Art und Weise Sie es tun könnte:

In CSS Sie eine Medien Abfrage verwenden können, um ein- oder ausblenden Inhalt:

@media (max-width:632px){ 
    #computer{ 
     display: none; 
    } 
    #phone{ 
     display: block; 
    } 
} 

Sie können dann haben 2 x HTML-Abschnitte zum Beispiel für beide Computer/Smartphones (Wenn Sie große Unterschiede in der Struktur usw. zwischen Geräten haben möchten)

Gut zu lesen auf Medienanfragen - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html