/ / फाउंडेशन ग्रिड में पुश और पुल - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -5

फाउंडेशन ग्रिड में पुश एंड पुल - ज़र्ब-फाउंडेशन, ज़र्ब-फाउंडेशन -5

मुझे नींव में एक लेआउट की जरूरत है कि मध्यम और ऊपर पर है:

[8][4A]
[4B]

और छोटे पर:

[4A]
[8]
[4B]

मैं इसे प्राप्त करने के करीब हूं, लेकिन जब मेरे 8 ब्लॉक में बहुत सारी सामग्री है, तो 4 बी को पृष्ठ पर धक्का दिया गया है, मुझे इसे 4 ए से नीचे साइट पर चाहिए

यहाँ एक है codepen

उत्तर:

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

क्या आप उन्हें इस क्रम में ढेर कर सकते हैं या यह आपके टेम्पलेट के साथ संघर्ष करेगा? अंतर को ठीक करने के लिए लगता है

<div class="row text-center">
<div class="small-12 columns medium-4 medium-push-8 ">
<div class="panel">        4A</div>
<div class="panel">        4B</div>
</div>

<div class="small-12 medium-8 medium-pull-4 columns">
<div class="panel">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>

अगर तुम चाहते हो 4b नीचे होना column medium-8 फिर एक जोड़ें .clearfix इसके बाद

  <div class="small-12 medium-8 medium-pull-4 columns">
<div class="panel">
<p>Content</p>
<p>Content</p>
</div>
</div>

<div class="clearfix"></div> // here clear floating position

<div class="small-12 columns medium-4 medium ">
<div class="panel">4A</div>
</div>