ट्विटर बूटस्ट्रैप के साथ उत्तरदायी divs reordering?

Question

मैं Twitter Bootstrap v3 के साथ काम कर रहा हूं और column ordering और offsetting का उपयोग करके तत्वों को प्रतिक्रियापूर्वक पुन: व्यवस्थित करना चाहता हूं।

इस प्रकार मैं अपने तत्वों का उपयोग करना चाहता हूं। -xs या -sm breakpoints में युक्त div के साथ एक पंक्ति को खड़ी 4:

:

-md या -lg breakpoints में युक्त div के साथ एक पंक्ति में 2 खड़ी यह वर्तमान कोड है - मुझे पता है कि कक्षाओं को युक्त div पर कैसे सेट किया जाए, लेकिन ए, बी और सी पर नहीं:

<div class="row"> 
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3"> 
     <div class="row"> 
     <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div> 
     <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div> 
     <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div> 
     </div> 
    </div> 
    ... more containing divs... 
    </div> 

मैं यह नहीं समझ सकता कि बूटस्ट्रैप 3 के column ordering और offsetting के साथ सही क्रम में ए, बी और सी कैसे प्राप्त करें। क्या यह वास्तव में संभव है?

यह जहाँ तक मैं JSFiddle का उपयोग कर मिल गया है प्रकार है: http://jsfiddle.net/3vYgR/

Answer 1

मुझे लगता है कि आप push और pull वर्गों को देखने के लिए चाहते हैं ...

<div class="row"> 
    <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div> 
    <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div> 
    <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div> 
</div> 

डेमो: http://bootply.com/77853

Answer 2

किसी भी कारण इस पर अधिक परंपरागत तरीकों का उपयोग नहीं करने के लिए, अर्थात्। फ्लोटिंग बी बाएं और अन्य तत्व दाईं ओर?

की तरह अगर आप अपने jsfiddle में वर्तमान सीएसएस को यह कहा:

.b { 
    float: left; 
    width: 50%; 
    height: 100px; 
} 
.a, .c { 
    float: right; 
    width: 50%; 
    height: 50px; 
} 

http://jsfiddle.net/E6BFk/

देखें मुझे यकीन है कि बूटस्ट्रैप के स्तंभ आदेश स्टैकिंग प्रभाव को पूरा कर सकता है, शायद ही फिर से आदेश नहीं कर रहा हूँ ... हालांकि दस्तावेज उस सुविधा पर बहुत पतला है।

Answer 3

मैं धक्का करने की कोशिश की/के रूप में Skelly लेकिन सी द्वारा जवाब में दिखाया खींच समाप्त होता है एक बार एक नई पंक्ति में एक बार ऊंचाई लागू होती है: http://www.bootply.com/Q3djHYawgb#

यदि छोटे आकार में दिखाए जाने पर बी को पहले दिखाया जा सकता है, तो मुझे लगता है कि दाएं हाथ के कॉलम के अंदर पंक्ति बनाने के लिए ए और सी रखने के लिए यह अधिक समझ में आता है:

<div class="containing row"> 
    <div class="b col-xs-12 col-md-6">Content of B</div> 
    <div class="ac col-xs-12 col-md-6"> 
     <div class="row"> 
      <div class="a col-xs-12">Content of A</div> 
     </div> 
     <div class="row"> 
      <div class="c col-xs-12">Content of C</div> 
     </div> 
    </div> 
</div> 

देखें http://jsfiddle.net/hoodoo99/L2BE9/

Answer 4

@skelly द्वारा प्रदान की जवाब महान शुरुआती बिंदु है, लेकिन कुछ लंबवत संरेखण समस्याओं का कारण है। कल्पना कीजिए एक एक लंबा div, तो सी खड़ी इसके अलावा एक .:

[A] [B] 
[ ] 
    [C] 

नीचे गठबंधन है, तो आप इस एक कदम और आगे आप भी clearfix ब्लॉक के उपयोग पर विचार करना पड़ सकता है लेना चाहते हैं है।उदाहरण के लिए; clearfixmd या lg

<!-- Add clearfix for only the required viewport(s) --> 
<div class="clearfix visible-md-block visible-lg-block"></div> 

बिना खत्म हो सकता है के रूप में:

[A] [B] 
    [C] [D] 

यह विशेष रूप से महत्वपूर्ण है अगर आप अंतिम "कॉलम" में अधिक से अधिक 2 तत्वों चाहते हैं, या तत्वों की ऊंचाई फेंकने शुरू संरेखण के बाहर अन्य तत्व।

clearfixmd या lg के साथ होगा:

[A] [B] 
    [C] 
    [D] 

उदाहरण बेला: http://jsfiddle.net/L5174o8d/