2 या 3 उत्तरदायी कॉलम बूटस्ट्रैप

Question

मैं पंक्ति अवधि का उपयोग करके कॉलम की चरम संख्या होना चाहता हूं, xs पर विशिष्ट 3 कॉलम, sm पर 2 कॉलम (पहले 2 कॉलम एक दूसरे से ऊपर), और एलजी पर 3 कॉलम होना चाहते हैं। मुझे नहीं पता कि एसएम स्क्रीन के लिए उत्तरदायी रोशन कैसे कार्यान्वित करें।

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-3"> 
      <div class="alert alert-info">B</div> 
     </div>  

     <div class="col-sm-8 col-lg-6 col-lg-pull-3"> 
      <div class="alert alert-danger">C</div> 
     </div> 

    </div> 
</div> 

और यहाँ codepen है:: http://codepen.io/nebitno/pen/ORxjLv

Answer 1

यह काफी मुश्किल है

यहाँ मेरी कोड अब तक है:

यहाँ दृश्य प्रतिनिधित्व है। यहां समाधान है जिसके साथ मैं आया था। वांछित परिणाम प्राप्त करने के लिए आपको थोड़ी सी jQuery का उपयोग करने की आवश्यकता होगी।

यहाँ एचटीएमएल है, ध्यान दें कि कैसे मैं कॉलम बंद:

<script> 
      var $iW = $(window).innerWidth(); 
      if ($iW < 768){ 
      $('.small').insertBefore('.big'); 
      }else{ 
      $('.big').insertBefore('.small'); 
      } 
    </script> 

नोट::

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> 
      <div class="alert alert-danger">C</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> 
      <div class="alert alert-info">B</div> 
     </div>  

    </div> 
</div> 

और यहाँ jQuery है यह करने के लिए नकारात्मक पक्ष यह है कि jQuery के लिए बाध्य नहीं किया जाता है खिड़की का आकार बदल रहा है। तो यदि आप दस्तावेज़ लोड के बाद विंडो का आकार बदलना चाहते थे, तो आपके पास बहुत खराब परिणाम होगा। हालांकि, इसे $(window).resize(function(){});

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

यहाँ HTML है:

 .small-screen-only{ 
      display: none; 
     } 

     @media all and (max-width: 767px) 
     { 
      .small-screen-only{ 
       display: block 
      } 

      .small{ 
       display: none; 
      } 
     } 

मैं व्यक्तिगत रूप से सीएसएस विकल्प को चुनते हैं, क्योंकि यह अधिक है:

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 small-screen-only"> 
      <div class="alert alert-info">B</div> 
     </div> 

     <div class="col-sm-8 col-lg-6 col-lg-pull-0 big"> 
      <div class="alert alert-danger">C</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-9 small"> 
      <div class="alert alert-info">B</div> 
     </div>  

    </div> 
</div> 

सूचना ब्लॉक बी के दोहराव

यहाँ सीएसएस है ब्राउज़र के मूल निवासी। भले ही ब्लॉक की सामग्री गतिशील रूप से जोड़ा गया हो, मुझे विश्वास है कि आप अभी भी इसके चारों ओर एक रास्ता खोज सकते हैं।

Answer 2

मैंने आपके एचटीएमएल में कुछ मामूली बदलाव किए और कार्यक्षमता प्राप्त करने के लिए दो jQuery तरीके जोड़े। आप किसी भी विधि का उपयोग कर सकते हैं जो आपको बेहतर बनाता है।

html-

<div class="container text-center"> 
    <div class="row"> 

     <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
      <div class="alert alert-warning">A</div> 
     </div> 

     <div class="col-sm-4 col-lg-3 col-lg-pull-3 B"> 
      <div class="alert alert-info">B</div> 
     </div>  

     <div class="col-sm-8 col-lg-6 col-lg-pull-3 C"> 
      <div class="alert alert-danger" >C</div> 
     </div> 

    </div> 
</div> 

jQuery (1 जिस तरह से) -

var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C:parent').each(function() { 
        $(this).insertBefore($(this).prev('.B')); 
       }); 
       }else if(wH<768 || wH>=992) 
       { 
       $('.B:parent').each(function() { 
        $(this).insertBefore($(this).prev('.C')); 
       }); 
} 
$(window).resize(function() { 
      wH = $(window).innerWidth(); 
      if (wH < 992 && wH>=768){ 
      $('.C').insertBefore('.B');   
      }else if(wH<768 || wH>=992) 
      { 
      $('.B').insertBefore('.C');   
      } 
      }) 

चेक बाहर इस बेला: http://jsfiddle.net/SkyT/wVVbT/150/

jQuery (2 रास्ता) -

var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C').insertBefore('.B');   
       }else if(wH<768 || wH>=992) 
       { 
       $('.B').insertBefore('.C');   
       } 
$(window).resize(function() { 
       var wH = $(window).innerWidth(); 
       if (wH < 992 && wH>=768){ 
       $('.C:parent').each(function() { 
         $(this).insertBefore($(this).prev('.B')); 
       }); 
       }else if(wH<768 || wH>=992) 
       { 
       $('.B:parent').each(function() { 
         $(this).insertBefore($(this).prev('.C')); 
       });  
       } 
       }) 

चेकआउट इस बेला: https://jsfiddle.net/SkyT/tst5g7ec/1/

Answer 3

एक सीएसएस के लिए एकमात्र समाधान है, तो आप निरपेक्ष स्थिति स्तंभ सी ब्रेकप्वाइंट sm पर .row के सापेक्ष और स्पष्ट स्तंभ बी कर सकते हैं। अपने HTML & सीएसएस रखें के रूप में अतिरिक्त सीएसएस के साथ है:

@media screen and (min-width: 768px) and (max-width : 1200px) { 

    .row { 
     position:relative; 
    } 

    .col-sm-4:nth-child(2) { 
     clear:left; 
    } 

    div[class^="col-"]:last-child { 
     position:absolute; 
     right:0; 
    } 

} 

नुकसान इस दृष्टिकोण के साथ आ रहा है कि .row होगा ठीक से स्पष्ट नहीं करता है, तो कॉलम सी की ऊंचाई से बढ़कर कॉलम ए + बी ' Clearfix with absolute positioned elements में समझाया गया है की ऊंचाई।

यहां आपके कोडपेन का updated version है।