बूटस्ट्रैप का उपयोग कर एक उत्तरदायी दृश्य में कॉलम को कैसे विभाजित करें?

Question

मैं बूटस्ट्रैप v4 alpha4

उपयोग कर रहा हूँ वर्तमान में मेरे पास है:

.row 
    .col-xs-12.col-md-8 
    div A 
    .col-xs-12.col-md-4 
    div B 
    div C 

XS लेआउट के लिए, मैं चाहता हूँ div आदेश होने के लिए:

Div B 
Div A 
Div C 

मेरे पास है यह नहीं पता कि यह कैसे करें या इसके बारे में भी पूछें। मैं एक फ्रंट एंड देव नहीं हूं इसलिए मुझे नहीं पता कि चीजें क्या कहलाती हैं।

हम जो कुछ भी चाहते हैं हम HTML को बदल सकते हैं। यह नहीं अब ऐसा ही रहना है।

Answer 1

बूटस्ट्रैप column ordering classes है, लेकिन इस मामले में आप बस responsive float classes ..

<div class="row"> 
    <div class="col-md-4 pull-md-right"> 
     b 
    </div> 
    <div class="col-md-8"> 
     a 
    </div> 
    <div class="col-md-4"> 
     c 
    </div> 
</div> 

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

उपयोग कर सकते हैं

Answer 2

flexbox के बजाय

, मैं उम्मीद परिणाम प्राप्त करने के float और position सीएसएस गुण के संयोजन का इस्तेमाल किया। 150px और 100px के रूप में बड़ी चौड़ाई के रूप में बड़ी चौड़ाई मानते हैं।

Working Fiddle

.container { 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
.blue { 
 
    width: 150px; 
 
    height: 300px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 
.pink { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: pink; 
 
    float: right; 
 
} 
 
.green { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    clear: right; 
 
    float: right; 
 
} 
 
@media (max-width: 450px) { 
 
    .blue { 
 
    position: relative; 
 
    } 
 
    .green, 
 
    .pink { 
 
    float: none; 
 
    width: 150px; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="pink"></div> 
 
    <div class="blue"></div> 
 
    <div class="green"></div> 
 
</div>

Answer 3

तो बूटस्ट्रैप से कक्षाओं का उपयोग करना और कुछ सामान्य शैली आप प्राप्त कर सकते हैं जैसे मैंने इस पेन में किया था।

http://codepen.io/TunderScripts/pen/PGadpr

एचटीएमएल:

<div class="row"> 
    <div class="col-xs-12 col-md-4 pull-right col1"></div> 
    <div class="col-xs-12 col-md-8 pull-left col2"></div> 
    <div class="col-xs-12 col-md-4 pull-right col3"></div> 
</div> 

सीएसएस:

.col1{ 
    background: red; 
    height: 200px; 
} 
.col2{ 
    background: blue; 
    height: 600px; 
} 
.col3{ 
    background: green; 
    height: 200px; 
} 

आप तैरता के लिए अपनी कक्षाओं का उपयोग करके डिफ़ॉल्ट व्यवहार को बदल सकते हैं (पुल छोड़ दिया, खींच-दाएं) ।

Answer 4

के रूप में वादा किया था, एक सरल draft

एचटीएमएल

<div class="row"> 
    <div class="col1">DIV A</div> 
    <div class="col2">DIV B</div> 
    <div class="col3">DIV C</div> 
</div> 

सीएसएस

.row { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between; 
    width: 400px; 
    margin: 0 auto; 
} 

.col1 { 
    width: 200px; 
    height: 400px; 
    background-color: #86a0ff; 
} 

.col2 { 
    width: 150px; 
    height: 150px; 
    background-color: #ff6cde; 
} 

.col3 { 
    margin-top: -200px; 
    margin-left: auto; 
    width: 150px; 
    height: 150px; 
    background-color: #35af6d; 
} 

@media (max-width: 768px) { 
    .row { 
    justify-content: center; 
    flex-direction: column; 
    } 

    .col1 { 
    order: 2; 
    width: 200px; 
    margin-top: 50px; 
    } 

    .col2 { 
    order: 1; 
    width: 200px; 
    } 

    .col3 { 
    order: 3; 
    width: 200px; 
    margin-top: 50px; 
    margin-left: 0; 
    } 
} 

स्पष्टीकरण के लिए के रूप में, यहाँ एक महान guide flexbox है। मेरे उदाहरण में मुख्य विचार यह है कि ऑर्डर प्रॉपर्टी का उपयोग करके आप उस क्रम में हेरफेर कर सकते हैं जिसमें ब्लॉक प्रदर्शित हो रहे हैं। फ्लेक्सबॉक्स का उपयोग करने का मुख्य प्लस यह है कि वांछित परिणाम प्राप्त करने के लिए आपको किसी भी लाइब्रेरी (जैसे बूटस्ट्रैप) को लोड करने की आवश्यकता नहीं होगी, जैसे प्रतिक्रिया।और इसके पास एक अच्छा ब्राउज़र support भी है, जब तक आपको ब्राउज़र के पुराने संस्करणों का समर्थन करने की आवश्यकता न हो। मुझे उम्मीद है कि मेरा जवाब आपके लिए सहायक होगा!