/ / usporiadanie poradia stĺpcov div podľa tabletu alebo telefónu zariadenia. zurb základ 4 - zurb-nadácia

zoradiť poradie stĺpcov div podľa tabletu alebo telefónu zariadenia. zurb základ 4 - zurb-nadácia

Používam rámcový základ 4 zurb. Nasledujúce testovacie miesto je pre mňa v poriadku. Na zobrazenie pracovnej plochy mám na ľavej strane: veľké 7 stĺpcov (textové pole so sivým obsahom); na pravej strane: mám: veľké 5 stĺpcov (obrázok 1 zelený a obrázok 2 modrý). Pomôžte mi s presným príkladom kódu. V zobrazení tabletu a telefónu by som rád zoradil poradie stĺpcov div na: najskôr obrázok 1 zeleného poľa a potom nižšie, že je textové pole so sivým obsahom a potom pod ním je modrá krabica s obrázkom 2. Pomôžte mi s presným príkladom kódu. Ďakujeme vám vopred!

Tu je náhľad toho, čo mám doteraz: http://www.endsnore.com/_test1/marketing5.html

Tu je príklad toho, čo sa chcem stať v tabletom a telefóne: http://www.endsnore.com/_test1/images/_delete14.jpg

odpovede:

2 pre odpoveď č. 1

Nemôžete mať toto rozloženie bez toho, aby ste robili nejaké jquery alebo javascript. Neexistuje žiadny vstavaný css riešenie alebo dokonca javascript od nadácie, ktorý bude robiť trik pre vás.

Toto riešenie môžete vyskúšať. Najprv musíte mať rozloženie takto:

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

A potom tento skript presuňte prvý obrázok na vrchole:

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

Všimnite si, že skript pracuje iba na zaťaženiestránku, a nie pri zmene veľkosti prehliadača - nemyslím si, že to budete potrebovať takýmto spôsobom.Ale z akéhokoľvek dôvodu, potom len priložte "šírku" logiku do funkcie zmeny veľkosti, niečo ako:

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