/ / пренареждане на реда на диви колони според таблета или телефона на устройството. zurb foundation 4 - zurb-foundation

пренареждайте реда на div колоните според таблета или телефона на устройството. zurb foundation 4 - zurb-foundation

Аз използвам zurb фондация 4 рамка. Следният тестов сайт изглежда добре за мен. В настолния изглед имам отляво: големи 7 колони (текстово поле със сиво съдържание); от дясната страна: имам: големи 5 колони (изображение 1 зелено и изображение 2 синьо). Моля, помогнете ми с точен пример за код. При таблета и телефонния изглед бих искал да пренаредим реда на колоните на div: image 1 green box first, а след това по-долу е текстовото поле със сиво съдържание, а след това под това е картинката 2 blue box. Моля, помогнете ми с точен пример за код. Благодаря ви много предварително!

Ето преглед на това, което имам досега: http://www.endsnore.com/_test1/marketing5.html

Ето един пример за това, което искам да се случи на таблета и телефона: http://www.endsnore.com/_test1/images/_delete14.jpg

Отговори:

2 за отговор № 1

Не можете да имате това оформление, без да правите някаква jquery или javascript. Няма вградено css решение или дори javascript от Фондацията, което ще направи тирака за вас.

Можете да опитате това решение. Първо трябва да имате оформление нещо подобно:

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

И тогава този скрипт да премести първото изображение отгоре:

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

Обърнете внимание, че скриптът работи само при натоварванена страницата, а не при преоразмеряване на браузъра - аз не мисля, че ще ви трябва по този начин така или иначе. Но по каквато и да е причина да направите, а след това просто прикрепете "ширина" логика в функция преоразмеряване, нещо като:

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