आदेश और ढेर बूटस्ट्रैप के साथ 3 कॉलम 4

Question

मैं बूटस्ट्रैप कॉलम में इस संरचना है:

और मैं तुम्हें एक कम संकल्प को बदलने के लिए, आदेश दिया जा के रूप में निम्नानुसार हैं:

मैंने पाया है कि कैसे करने के लिए यहाँ flexbox के साथ कार्य करें: Flexbox: reorder and stack columns

लेकिन मैं अपने प्रोजेक्ट flexbox करने की पूरी संरचना को बदल नहीं सकते, इसलिए मैं जानना चाहता हूँ अगर बूटस्ट्रैप 4 के साथ, यह ऐसा करने के लिए संभव है।

बहुत बहुत धन्यवाद।

मेरा खराब परीक्षण।

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); 
 

 
div { 
 
    text-align: center; 
 
    height: 60px; 
 
} 
 

 
#left { 
 
    background: yellow; 
 
} 
 

 
#middle { 
 
    background: blue; 
 
} 
 

 
#right { 
 
    background: coral; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 col-md-3"> 
 
     <div id="left">COLUMN 1</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-6"> 
 
     <div id="middle">COLUMN 2</div> 
 
    </div> 
 
    <div class="col-sm-3 col-md-3"> 
 
     <div id="right">COLUMN 3</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

आप बूटस्ट्रैप 4 उपयोगिता वर्गों का उपयोग अतिरिक्त सीएसएस से बचने के लिए कर सकते हैं ..

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-6 push-md-3"> 
      <div id="middle">COLUMN 2</div> 
     </div> 
     <div class="col-sm-4 col-md-6"> 
      <div class='row'> 
      <div class="col-md-6 pull-md-12 flex-last flex-md-unordered"> 
      <div id="left">COLUMN 1</div> 
      </div> 
      <div class="col-md-6"> 
      <div id="right">COLUMN 3</div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/GIcPuzURbs

Answer 2

आप कम संकल्प के लिए स्तंभ 2 खींच करने की कोशिश की है?

Answer 3

मुझे लगता है कि "रिज़ॉल्यूशन" का मतलब है कि आप छोटे स्क्रीन आकार का मतलब रखते हैं?

यहां एक संभावित समाधान है जो कॉलम को मध्यम आकार के व्यूपोर्ट में पुन: व्यवस्थित करने के लिए कुछ बूटस्ट्रैप पुश/पुल ग्रिड यूटिलिटीज का उपयोग करता है, और फिर अपने आरेख में दिखाए गए तरीके से छोटे आकार के व्यूपोर्ट में लेआउट को पुनर्व्यवस्थित करें। छोटे परदे विचार में, एक मीडिया क्वेरी के भीतर मैं सीएसएस संपत्ति order का उपयोग 1 और 3 कॉलम को पुन: व्यवस्थित करने के लिए खड़ी यह सही रास्ते पर आप हो जाता है आशा है कि

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-6 push-md-3"> 
      <div id="middle">COLUMN 2</div> 
     </div> 
     <div class="col-sm-4 col-md-6"> 
      <div class='row'> 
      <div id='leftcont' class="col-md-6 pull-md-12"> 
      <div id="left">COLUMN 1</div> 
      </div> 
      <div id='rightcont' class="col-md-6"> 
      <div id="right">COLUMN 3</div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

सीएसएस:

div { 
    text-align:center; 
    height:60px; 
} 
#left{background:yellow;} 
#middle {background:blue;} 
#right {background:coral;} 

@media (max-width: 768px) { 
    #leftcont { order: 2; } 
    #rightcont { 
    order: 1; 
    margin-bottom: 1em; } 
} 

न्यू fiddle

divs की ऊंचाई ग्रिड breakpoints के लिए समायोजित करने की लेकिन जब से रंग का divs एक परीक्षण के लिए केवल थे, मैं अपने उदाहरण के लिए उन से मेल नहीं खाती हो सकता है