/ / Reihenfolge der div-Spalten nach Gerätetablett oder Telefon neu anordnen. zurb foundation 4 - zurb-foundation

Reihenfolge der div-Spalten nach Gerätetablett oder Telefon neu anordnen. zurb foundation 4 - zurb-foundation

Ich benutze das Framework 4 von zurb foundation.Die folgende Testseite sieht auf der Desktop-Ansicht für mich gut aus. Auf der Desktop-Ansicht habe ich auf der linken Seite: Groß-7 Spalten (grauer Inhalt Textfeld); auf der rechten seite: ich habe: große-5 spalten (bild 1 grün und bild 2 blau). Bitte helfen Sie mir mit genauem Codebeispiel. In der Tablet- und Telefonansicht möchte ich die Reihenfolge der div-Spalten wie folgt ändern: Bild 1 grüne Box zuerst und dann darunter das Textfeld mit grauem Inhalt und darunter das Bild 2 blaue Box. Bitte helfen Sie mir mit genauem Codebeispiel. Vielen Dank im Voraus!

Hier ist die Vorschau von dem, was ich bisher habe: http://www.endsnore.com/_test1/marketing5.html

Hier ist ein Beispiel für das, was ich in der Tablet- und Telefonansicht sehen möchte: http://www.endsnore.com/_test1/images/_delete14.jpg

Antworten:

2 für die Antwort № 1

Sie können dieses Layout nicht ohne Jquery oder Javascript haben. Es gibt keine eingebaute CSS-Lösung oder sogar Javascript von Foundation, die den Trick für Sie tun wird.

Sie können diese Lösung ausprobieren. Zuerst müssen Sie ein Layout wie folgt haben:

   <div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>

Und dann dieses Skript, um das erste Bild oben zu verschieben:

$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});

Beachten Sie, dass das Skript nur beim Laden von funktioniertdie Seite und nicht bei der Größenanpassung des Browsers - ich denke nicht, dass Sie es auf diese Weise sowieso brauchen werden. Aber aus welchen Gründen auch immer, dann schließen Sie einfach die "Breite" -Logik in eine Größenänderungsfunktion ein, etwa:

$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});