दिलचस्प पोस्ट
Foreach में संदर्भ द्वारा PHP पास JQuery डेटा () एपीआई का उपयोग करते हुए डेटा विशेषता को सेट करने में असमर्थ जैक्सन JSON और सीतनिद्रा में होना जेपीए मुद्दे के साथ अनंत पुनरावर्ती अर्लकोलोन (;) बनाम प्लस (+) का प्रयोग करके exec में ढूँढें स्विफ्ट प्रोग्रामिंग भाषा में टेक्स्ट फ़ील्ड के लिए कीबोर्ड छुपाएं रूबी में मामले को अंडरस्कोर करने के लिए ऊंट का मामला परिवर्तित करना परिवर्तन तत्व ऑर्डर सेट करें? उदाहरण के साथ जावास्क्रिप्ट मॉड्यूल पैटर्न लोहे राउटर या उल्का का उपयोग कर फाइल कैसे सेवा करें? जावा का अर्रे अनुक्रमणिका कहाँ है? टेम्पलेट्स: पैरेंट क्लास सदस्य चर विरासत में नहीं दिखाई देता है वर्ग एक हैशमैप के माध्यम से दोहराएं कैसे करने के लिए टूलटिप जोड़ने के लिए च: selectItems आईएसडी एसडीके 3.0 के साथ सीएसवी फ़ाइल में डेटा कैसे निर्यात करें? ASP.NET वेबफॉर्म के साथ AJAX के लिए jQuery का उपयोग करना

मैं सीएसएस के साथ अपने divs को पुन: क्रमित कैसे कर सकता हूँ?

एक टेम्पलेट जहां एचटीएमएल अन्य आवश्यकताओं की वजह से संशोधित नहीं किया जा सकता है, यह कैसे एक div ऊपर एक div प्रदर्शित करने (पुनर्व्यवस्थित) जब वे HTML में उस क्रम में नहीं है संभव है? दोनों div में डेटा है जो ऊंचाई और चौड़ाई में भिन्न होता है।

 <div id="wrapper"> <div id="firstDiv"> Content to be below in this situation </div> <div id="secondDiv"> Content to be above in this situation </div> </div> Other elements 

उम्मीद है कि यह स्पष्ट है कि वांछित परिणाम है:

 Content to be above in this situation Content to be below in this situation Other elements 

जब आयाम तय किया जाता है, जहां उन्हें आवश्यक होता है उन्हें स्थानबद्ध करना आसान होता है, लेकिन मुझे सामग्री की चर जब भी चर के लिए कुछ सुझाव चाहिए I इस परिदृश्य के लिए, कृपया दोनों की तरफ से 100% होने की चौड़ाई पर विचार करें।

मैं विशेष रूप से केवल एक सीएसएस समाधान की तलाश कर रहा हूं (और शायद यह अन्य समाधानों के साथ मिलना होगा, अगर वह पंस नहीं करता है)।

इसके निम्नलिखित अन्य तत्व हैं एक अच्छा सुझाव मैंने दिखाया सीमित परिदृश्य के आधार पर दिया था – यह देखते हुए कि यह सबसे अच्छा जवाब हो सकता है, लेकिन मैं यह भी सुनिश्चित कर रहा हूं कि इसके बाद के तत्व प्रभावित नहीं होंगे।

वेब के समाधान से एकत्रित समाधान "मैं सीएसएस के साथ अपने divs को पुन: क्रमित कैसे कर सकता हूँ?"

यह समाधान केवल सीएसएस का उपयोग करता है और चर सामग्री के साथ काम करता है

 #wrapper { display: table; } #firstDiv { display: table-footer-group; } #secondDiv { display: table-header-group; } 

एक सीएसएस-केवल समाधान ( IE10 + के लिए काम करता है) – फ्लेक्सबॉक्स की order प्रॉपर्टी का उपयोग करें:

डेमो: http://jsfiddle.net/hqya7q6o/596/

 <html> <head> <style> #flex { display: flex; flex-direction: column; } #a { order: 2; } #b { order: 1; } #c { order: 3; } </style> </head> <body> <div id="flex"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <body> </html> 

अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/CSS/order

जैसा कि अन्य लोगों ने कहा है, यह ऐसा नहीं है, जिसे आप सीएसएस में करना चाहते हैं। आप इसे पूर्ण स्थिति और अजीब मार्जिन के साथ छेड़छाड़ कर सकते हैं, लेकिन यह सिर्फ एक मजबूत समाधान नहीं है आपके मामले में सबसे अच्छा विकल्प जावास्क्रिप्ट को चालू करना होगा। JQuery में, यह एक बहुत आसान काम है:

 $('#secondDiv').insertBefore('#firstDiv'); 

या अधिक सामान्य रूप से:

 $('.swapMe').each(function(i, el) { $(el).insertBefore($(el).prev()); }); 

अकेले सीएसएस के माध्यम से आप क्या हासिल करना चाहते हैं, इसका बिल्कुल कोई रास्ता नहीं है- जब तक कि :

  1. आप प्रत्येक तत्व की सटीक रूपरेखा ऊंचाई जानते हैं (यदि हां, तो आप पूरी तरह से सामग्री की स्थिति बना सकते हैं) यदि आप गतिशील रूप से उत्पन्न सामग्री से निपटते हैं, तो आप भाग्य से बाहर हैं।
  2. आप इन तत्वों की सटीक संख्या जानते होंगे। दोबारा, यदि आप इसे गतिशील रूप से उत्पन्न सामग्री के कई खंडों के लिए करने की आवश्यकता है, तो आप भाग्य से बाहर हैं

यदि उपरोक्त सत्य हैं तो आप तत्वों को पूरी तरह से पोजिशनिंग द्वारा क्या कर सकते हैं –

 #wrapper { position: relative; } #firstDiv { position: absolute; height: 100px; top: 110px; } #secondDiv { position: absolute; height: 100px; top: 0; } 

दोबारा, अगर आपको पता नहीं है कि कम से कम # फर्स्टडीव के लिए ऊँचाई चाहते हैं, तो आप जिस तरह से सीएसएस के माध्यम से अकेले चाहते हैं, आप ऐसा नहीं कर सकते। यदि इनमें से कोई भी सामग्री गतिशील है, तो आपको जावास्क्रिप्ट का उपयोग करना होगा।

यह फ्लेक्सबॉक्स का उपयोग करके किया जा सकता है।

डिस्प्ले दोनों पर लागू होने वाले कंटेनर बनाएं : फ्लेक्स और फ्लेक्स फ्लो: कॉलम-रिवर्स

 /* -- Where the Magic Happens -- */ .container { /* Setup Flexbox */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Reverse Column Order */ -webkit-flex-flow: column-reverse; flex-flow: column-reverse; } /* -- Styling Only -- */ .container > div { background: red; color: white; padding: 10px; } .container > div:last-of-type { background: blue; } 
 <div class="container"> <div class="first"> first </div> <div class="second"> second </div> </div> 

यहां एक समाधान है:

 <style> #firstDiv { position:absolute; top:100%; } #wrapper { position:relative; } 

लेकिन मुझे संदेह है कि आपके पास कुछ सामग्री है जो रैपर डिवेल के बाद होती है …

यदि आप जानते हैं, या ऊपरी तत्व के लिए आकार को लागू कर सकते हैं, तो आप उपयोग कर सकते हैं

 position : absolute; 

अपने सीएसएस में और divs अपनी स्थिति दे।

अन्यथा जावास्क्रिप्ट जाने का एकमात्र तरीका है:

 fd = document.getElementById( 'firstDiv' ); sd = document.getElementById( 'secondDiv' ); fd.parentNode.removeChild( fd ); sd.parentNode.insertAfter( fd, sd ); 

या कुछ इसी तरह की।

संपादित करें: मैं बस यह पाया जो उपयोगी हो सकता है: w3 दस्तावेज़ css3 चाल-टू

नकारात्मक शीर्ष मार्जिन इस प्रभाव को प्राप्त कर सकते हैं, लेकिन उन्हें प्रत्येक पृष्ठ के लिए अनुकूलित करने की आवश्यकता होगी। उदाहरण के लिए, यह मार्कअप …

 <div class="product"> <h2>Greatest Product Ever</h2> <p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p> <p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p> </div> 

… और यह सीएसएस …

 .product { width: 400px; } .desc { margin-top: 5em; } .sidenote { margin-top: -7em; } 

… आपको पहले पैराग्राफ को पहले से ऊपर खींचने की अनुमति देगा

बेशक, आपको मैन्युअल रूप से अपने सीएसएस को अलग-अलग विवरण लंबाई के लिए ज़ूम करना होगा ताकि परिचय पैराग्राफ उचित मात्रा में कूद कर सके, लेकिन अगर आपके पास अन्य भागों और मार्कअप और सीएसएस पर पूर्ण नियंत्रण पर सीमित नियंत्रण है तो यह एक विकल्प हो सकता है ।

CSS3 फ्लेक्सबॉक्स लेआउट मॉड्यूल के साथ, आप divs का ऑर्डर कर सकते हैं।

 #wrapper { display: flex; flex-direction: column; } #firstDiv { order: 2; } <div id="wrapper"> <div id="firstDiv"> Content1 </div> <div id="secondDiv"> Content2 </div> </div> 

खैर, पूर्ण स्थिति और कुछ खराब मार्जिन सेटिंग के साथ, मैं करीब मिल सकता हूं, लेकिन यह सही या सुंदर नहीं है:

 #wrapper { position: relative; margin-top: 4em; } #firstDiv { position: absolute; top: 0; width: 100%; } #secondDiv { position: absolute; bottom: 0; width: 100%; } 

"मार्जिन-टॉप: 4 एम" विशेष रूप से गंदा बिट है: इस मार्जिन को पहले डिव में सामग्री की मात्रा के अनुसार समायोजित करने की आवश्यकता है आपकी सटीक आवश्यकताओं के आधार पर, यह संभव हो सकता है, लेकिन मैं किसी भी तरह से उम्मीद कर रहा हूं कि कोई ठोस समाधान के लिए इस पर कोई भी निर्माण कर सकता है।

जावास्क्रिप्ट के बारे में एरिक की टिप्पणी को अपनाया जाना चाहिए।

आपको इसकी ज़रूरत है! सीएसएस फ़्लोट में बाएं या दायें से पहले डिवा फ्लोट दूसरे डिवा द्वारा बाएं या दाएं से पहले दूसरा डिव के लिए दो डिवी के ऊपर से ऊपर छोड़ें या सही उदाहरण के लिए:

 #firstDiv { float: left; } #secondDiv { float: left; clear: left; } 

मज़े मेरे दोस्त

मैं केवल मोबाइल संस्करण के लिए डिविज़ के आदेश को बदलने का एक तरीका तलाश रहा था, इसलिए मैं इसे अच्छी तरह से शैली दे सकता हूं Nickf उत्तर के लिए धन्यवाद मुझे इस कोड के टुकड़े जो मैं चाहता था के लिए अच्छी तरह से काम करने के लिए मिला है, तो मैं यद्यपि आप लोगों के साथ साझा करने के लिए:

 // changing the order of the sidebar so it goes after the content for mobile versions jQuery(window).resize(function(){ if ( jQuery(window).width() < 480 ) { jQuery('#main-content').insertBefore('#sidebar'); } if ( jQuery(window).width() > 480 ) { jQuery('#sidebar').insertBefore('#main-content'); } jQuery(window).height(); // New height jQuery(window).width(); // New width }); 

यह केवल सीएसएस के साथ किया जा सकता है!

कृपया इस तरह के समान प्रश्न का उत्तर दें:

https://stackoverflow.com/a/25462829/1077230

मैं अपने जवाब को दोहरा नहीं करना चाहता, लेकिन इसकी कमी यह है कि माता-पिता को एक फ्लेक्सबॉक्स तत्व बनना चाहिए। उदाहरण के लिए:

(केवल वेबकिट विक्रेता उपसर्ग का उपयोग करके यहां।)

 #main { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } 

उसके बाद, स्वैप उनके ऑर्डर को इंगित करके चारों ओर बिछाते हैं:

 #main > div#one{ -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; overflow:visible; } #main > div#two{ -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } 

एक बड़ा ब्राउज़र समर्थन वाला समाधान तब फ्लेक्सबॉक्स (IE9 9 में काम करता है):

 #wrapper { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); } #wrapper > * { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); } 
 <div id="wrapper"> <div id="firstDiv"> Content to be below in this situation </div> <div id="secondDiv"> Content to be above in this situation </div> </div> Other elements 

बस display: flex निर्दिष्ट करके पैरेंट डिवेल के लिए फ्लेक्स का उपयोग करें display: flex और flex-direction : column । फिर यह निर्धारित करने के लिए कि कौन सा बच्चा डिवी पहले आता है, उसका उपयोग करें

सीएसएस वास्तव में एचटीएमएल बैकएंड के पुनर्गठन के लिए इस्तेमाल नहीं किया जाना चाहिए। हालांकि, यह संभव है यदि आप दोनों तत्वों की ऊंचाई को जानते हैं और वे हैंशश महसूस कर रहे हैं। इसके अलावा, डिविज़ के बीच में जाने पर पाठ चयन को गड़बड़ कर दिया जाएगा, लेकिन क्योंकि एचटीएमएल और सीएसएस ऑर्डर विपरीत हैं

 #firstDiv { position: relative; top: YYYpx; height: XXXpx; } #secondDiv { position: relative; top: -XXXpx; height: YYYpx; } 

जहां XXX और YYY क्रमशः प्रथम डीव और दूसरी डिवाई की ऊंचाई हैं I यह शीर्ष तत्वों के विपरीत पीछे वाले तत्वों के साथ काम करेगा

मेरे पास एक बेहतर कोड है, मेरे द्वारा बनाया गया है, यह बहुत बड़ा है, सिर्फ दोनों चीजों को दिखाने के लिए … एक 4×4 तालिका बनाएं और एक सेल से ऊर्ध्वाधर संरेखित करें।

यह किसी भी आईई हैक का उपयोग नहीं करता, कोई ऊर्ध्वाधर-संरेखित नहीं: मध्य; बिलकुल…

यह ऊर्ध्वाधर केन्द्रिंग प्रदर्शन-तालिका, डिस्प्ले: टेबल-रोम के लिए उपयोग नहीं करता है; प्रदर्शन: तालिका सेल;

यह एक डिब्बे की चाल का उपयोग करता है जिसमें दो डिवा है, एक छिपी (स्थिति सही नहीं है, लेकिन माता पिता को सही चर आकार बना देता है), एक छिपी के बाद दिखाई देता है, लेकिन शीर्ष पर: -50%; तो यह स्थिति सही करने के लिए प्रस्तावक है।

डिवेल कक्षाएं देखें जो कि चाल बनती हैं: ब्लोक टिपो कंटेंडरर ब्लोक टिपो कंटेंडरर_वर्तिकलमेंट कंट्राडो ब्लोक टिपो कॉन्टिनिडो_वर्तिकलमेंट कंट्राडो_ ओकल्टी ब्लॉक्टीपो कॉन्टिनेदो_विटिकलमेंट कंट्राडो_व्यूबल

कक्षा नामों पर स्पेनिश का उपयोग करने के लिए कृपया खेद है (यह इसलिए है क्योंकि मैं स्पेनिश बोलता हूं और यह बहुत मुश्किल है कि अगर मैं अंग्रेजी का उपयोग करता हूं तो मुझे मिल जाता है)।

पूर्ण कोड:

 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en" /> <meta name="language" content="en" /> <title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title> <style type="text/css"> html,body{ margin:0px; padding:0px; width:100%; height:100%; } div.BloqueTipoTabla{ display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoFila_AltoAjustadoAlContenido{ display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto; } div.BloqueTipoFila_AltoRestante{ display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoCelda_AjustadoAlContenido{ display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto; } div.BloqueTipoCelda_RestanteAncho{ display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto; } div.BloqueTipoCelda_RestanteAlto{ display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%; } div.BloqueTipoCelda_RestanteAnchoAlto{ display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%; } div.BloqueTipoContenedor{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative; } div.BloqueTipoContenedor_VerticalmenteCentrado{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%; } div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%; } div.BloqueTipoContenido_VerticalmenteCentrado_Visible{ display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%; } </style> </head> <body> <h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1> <div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;"> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [1,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [1,4] </div> </div> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [2,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [2,4] </div> </div> <div class="BloqueTipoFila_AltoRestante"> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> The cell [3,1] <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> The cell [3,1] <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> *&nbsp;*&nbsp;*&nbsp;* <br /> Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This&nbsp;is<br />cell&nbsp;[3,2] </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This&nbsp;is<br />cell&nbsp;[3,2] </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAnchoAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This is cell [3,3] <br/> It is duplicated on source to make the trick to know its variable height <br /> First copy is hidden and second copy is visible <br/> Other cells of this row are not correctly aligned only on IE!!! </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This is cell [3,3] <br/> It is duplicated on source to make the trick to know its variable height <br /> First copy is hidden and second copy is visible <br/> Other cells of this row are not correctly aligned only on IE!!! </div> </div> </div> </div> <div class="BloqueTipoCelda_RestanteAlto"> <div class="BloqueTipoContenedor" style="border:1px solid lime;"> <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;"> <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto"> This&nbsp;other is<br />the cell&nbsp;[3,4] </div> <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;"> This&nbsp;other is<br />the cell&nbsp;[3,4] </div> </div> </div> </div> </div> <div class="BloqueTipoFila_AltoAjustadoAlContenido"> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,1] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,2] </div> <div class="BloqueTipoCelda_RestanteAncho"> [4,3] </div> <div class="BloqueTipoCelda_AjustadoAlContenido"> [4,4] </div> </div> </div> </body> </html> 

पार्टी के लिए बहुत देर हो चुकी है, लेकिन आप यह भी कर सकते हैं:

 <div style="height: 500px; width: 500px;"> <div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div> <div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div> 

या तत्व के लिए एक पूर्ण स्थिति निर्धारित करें और ऑब्जेक्ट के किनारे के बजाय पृष्ठ के किनारे से उन्हें घोषित करके मार्जिन को बंद करें। अन्य स्क्रीन आकारों के लिए उपयुक्त के रूप में% का उपयोग करें ect। इस तरह से मैं इस मुद्दे पर आगे बढ़ता हूं … धन्यवाद, आशा है कि आपकी क्या तलाश है …

सीएसएस केवल समाधान के लिए 1. आवरण की ऊँचाई तय की जानी चाहिए या 2. दूसरे भाग की ऊंचाई तय की जानी चाहिए

 .move-wrap { display: table; table-layout: fixed; // prevent some responsive bugs width: 100%; // set a width if u like /* TODO: js-fallback IE7 if u like ms */ } .move-down { display: table-footer-group; } .move-up { display: table-header-group; } 

यह सीएसएस के साथ आसान है, बस display:block उपयोग करें display:block और z-index संपत्ति

यहाँ एक उदाहरण है:

HTML:

 <body> <div class="wrapper"> <div class="header"> header </div> <div class="content"> content </div> </div> </body> 

सीएसएस:

 .wrapper { [...] } .header { [...] z-index:9001; display:block; [...] } .content { [...] z-index:9000; [...] } 

संपादित करें: चीजों को ठीक से देखने के लिए div-s को कुछ background-color सेट करना अच्छा है

मेरे पास यह करने का एक आसान तरीका है।

 <!-- HTML --> <div class="wrapper"> <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div> <div>Content that stays in place</div> <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div> </div> <!-- CSS --> .sm-hide {display:block;} .sm-show {display:none;} @media (max-width:598px) { .sm-hide {display:none;} .sm-show {display:block;} }