/ / उपकरण टैबलेट या फोन के अनुसार div कॉलम के क्रम को पुनर्व्यवस्थित करें। ज़र्ब फाउंडेशन 4 - ज़र्ब-फाउंडेशन

उपकरण टैबलेट या फोन के अनुसार div कॉलम के क्रम को पुनर्व्यवस्थित करें। ज़र्ब फाउंडेशन 4 - ज़र्ब-फाउंडेशन

मैं ज़र्ब फाउंडेशन 4 ढांचे का उपयोग कर रहा हूँ। निम्न परीक्षण साइट मेरे लिए डेस्कटॉप दृश्य पर ठीक दिखती है। डेस्कटॉप दृश्य पर, मेरे पास बाईं ओर है: बड़े -7 कॉलम (ग्रे सामग्री टेक्स्ट बॉक्स); दाईं तरफ: मेरे पास है: बड़े -5 कॉलम (छवि 1 हरा और छवि 2 नीला)। कृपया सही कोड उदाहरण के साथ मेरी मदद करें। टैबलेट और फोन व्यू पर, मैं div कॉलम के क्रम को पुनर्व्यवस्थित करना चाहता हूं: छवि 1 हरे रंग का बॉक्स पहले, और उसके बाद वह ग्रे सामग्री टेक्स्ट बॉक्स है, और उसके बाद वह छवि 2 नीली बॉक्स है। कृपया सही कोड उदाहरण के साथ मेरी मदद करें। अग्रिम में बहुत बहुत धन्यवाद!

मेरे पास अब तक का पूर्वावलोकन है: http://www.endsnore.com/_test1/marketing5.html

टैबलेट और फोन व्यू पर मैं क्या करना चाहता हूं इसका एक उदाहरण यहां दिया गया है: http://www.endsnore.com/_test1/images/_delete14.jpg

उत्तर:

जवाब के लिए 2 № 1

आपके पास कुछ jquery या जावास्क्रिप्ट किए बिना वह लेआउट नहीं हो सकता है। कोई अंतर्निहित सीएसएस समाधान या फाउंडेशन से जावास्क्रिप्ट भी नहीं है जो आपके लिए चाल करेगा।

आप इस समाधान का प्रयास कर सकते हैं। सबसे पहले आपको ऐसा कुछ लेआउट रखना होगा:

   <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());
}
});