/ / uporządkuj kolejność kolumn div zgodnie z tablicą urządzenia lub telefonem. zurb foundation 4 - zurb-foundation

uporządkuj kolejność kolumn div zgodnie z tablicą urządzenia lub telefonem. zurb foundation 4 - zurb-foundation

Używam ramy zurb foundation 4. Następująca witryna testowa wygląda dobrze dla mnie na widoku pulpitu. W widoku pulpitu mam po lewej stronie: duże-7 kolumn (pole tekstowe w kolorze szarym); po prawej stronie: mam: duże-5 kolumn (obrazek 1 zielony i obraz 2 niebieski). Proszę, pomóż mi z dokładnym przykładem kodu. W widoku tabletu i telefonu chciałbym zmienić kolejność kolumn div na: najpierw 1 zielone pole, a następnie poniżej pole tekstowe w kolorze szarym, a poniżej 2 niebieskie pole obrazka. Proszę, pomóż mi z dokładnym przykładem kodu. Z góry bardzo dziękuję!

Oto podgląd tego, co do tej pory: http://www.endsnore.com/_test1/marketing5.html

Oto przykład tego, co chcę zrobić w widoku tabletu i telefonu: http://www.endsnore.com/_test1/images/_delete14.jpg

Odpowiedzi:

2 dla odpowiedzi № 1

Nie możesz mieć tego układu bez wykonywania jquery lub javascriptu.Nie ma wbudowanego rozwiązania css lub nawet javascript z Foundation, który zrobi dla ciebie lewę.

Możesz wypróbować to rozwiązanie. Najpierw musisz mieć układ podobny do tego:

   <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>

Następnie prześlij ten skrypt, aby przenieść pierwszy obraz na wierzch:

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

Zauważ, że skrypt działa tylko przy obciążeniuna stronie, a nie podczas zmiany rozmiaru przeglądarki - nie sądzę, że będziesz tego potrzebował w ten sposób, ale z dowolnego powodu, po prostu zamknij logikę "width" w funkcji zmiany rozmiaru, coś w stylu:

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