बूटस्ट्रैप 4 के माध्यम से कॉलम ऑर्डर करें

Question

मेरे पास 3 कॉलम हैं जो मैं डेस्कटॉप और मोबाइल पर अलग-अलग तरीकों से ऑर्डर करना चाहता हूं। वर्तमान में, मेरी कमर इस तरह दिखती है:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

मोबाइल दृश्य में मैं निम्नलिखित आउटपुट रखना चाहता हूं:

1-3-2

दुर्भाग्य से मुझे बूटस्ट्रैप 4 में .col-md-push-*और .col-md-pull-*कक्षाओं के साथ इसे हल करने का तरीका नहीं मिला ।

Comments

यह डॉक्स में वर्णित है: v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering

— Cray

col-xx-push- और col-xx-pull- बूटस्ट्रैप की तरह ही होते हैं 3. क्या आप 'md' और 1-2 से ऊपर, अन्य पंक्ति 3 और 'sm' के लिए और 1-3-2 से नीचे ग्रिड चाहते हैं ?

— tmg

Answer 1

2018 - नवीनतम बूटस्ट्रैप 4 के साथ इस प्रश्न को फिर से देखें।

उत्तरदायी आदेश देने वाली कक्षाएं अब हैं order-first, order-lastऔर order-0-order-12

बूटस्ट्रैप 4 धक्का पुल वर्गों अब कर रहे हैं push-{viewport}-{units}और pull-{viewport}-{units}और xs-इन्फ़िक्स हटा दिया गया है। मोबाइल / xs पर वांछित 1-3-2 लेआउट पाने के लिए: बूटस्ट्रैप 4 पुश पुल डेमो (यह केवल 4.0 बीटा पूर्व काम करता है)

---

बूटस्ट्रैप 4.1+

चूंकि बूटस्ट्रैप 4 फ्लेक्सबॉक्स है, इसलिए कॉलम के क्रम को बदलना आसान है। माता-पिता के सापेक्ष , कर्नलों को आदेश दिया जा सकता order-1है order-12, जिम्मेदारी से जैसे order-md-12 order-2(अंतिम बार md, 2 पर xs) .row।

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

डेमो: वर्गों का उपयोग करके ऑर्डर बदलेंorder-*

डेस्कटॉप (बड़ी स्क्रीन):

मोबाइल (छोटी स्क्रीन):

फ्लेक्सबॉक्स दिशा बर्तनों का उपयोग करके कॉलम ऑर्डर बदलना भी संभव है ...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

डेमो: बूटस्ट्रैप 4.1 फ्लेक्सबॉक्स डायरेक्शन के साथ ऑर्डर बदलें

---

पुराने संस्करण डेमो
डेमो - अल्फा 6
डेमो - बीटा (3)

अधिक बूटस्ट्रैप 4.1+ ऑर्डरिंग डेमो देखें

---

संबंधित:
पुश / पुल और Col-md-12
बूटस्ट्रैप 4 कॉलम के परिवर्तन क्रम के साथ बूटस्ट्रैप 4 में कॉलम ऑर्डर

एसीबी एबीसी

Comments

@ एलेरिज़ा - order-*कक्षाएं कई बार इस्तेमाल नहीं की जा सकतीं। यह वैसे काम करता है। डॉक्स से .. "ये कक्षाएं उत्तरदायी हैं, इसलिए आप ब्रेकपॉइंट द्वारा ऑर्डर सेट कर सकते हैं (जैसे, .order-1.ऑर्डर-एमडी -2)। सभी पांच ग्रिड टायरों में 12 के माध्यम से 1 के लिए समर्थन शामिल करें।"

— ज़िम

@Zim तो order-2 order-md-12वर्गों को एक साथ इस्तेमाल नहीं किया जा सकता है?

— अलीरेज़ा

नहीं, उन्हें एक साथ इस्तेमाल किया जा सकता है।

— जिम

@Zim order-md-1 order-sm-2और order-1 order-sm-2काम न करें। मैं इसे मैन्युअल रूप से कर रहा हूं

— Alireza

यदि आप कोड के ऊपर दिए गए संस्करण का उपयोग कर रहे हैं तो वे काम करते हैं । code /.com/go/23VFxwWTdP । इसके अलावा, मुझे नहीं पता कि आप क्या हासिल करने की कोशिश कर रहे हैं जो मूल प्रश्न से अलग है, जिसके लिए मेरा उत्तर लागू होता है। याद रखें कि कॉल एक ही पंक्ति में एक दूसरे के सापेक्ष हैं।

— ज़ीम

Answer 2

यह सीएसएस "ऑर्डर" संपत्ति और एक मीडिया क्वेरी के साथ भी प्राप्त किया जा सकता है।

कुछ इस तरह:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

कोडपैन लिंक: https://codepen.io/preston206/pen/EwrXqm

Comments

मैं सिर्फ मोबाइल के लिए बूटस्ट्रैप कक्षाओं के साथ आदेश प्राप्त नहीं कर सका। इसने काम किया, धन्यवाद

— जेवियर ओजेदा अगुइलर

Answer 3

यहां तक ​​कि यह काम करेगा:

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>

Answer 4

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं, इसलिए मुझे नहीं पता कि यह बूटस्ट्रैप 4 करने का कोई आसान तरीका है या नहीं, लेकिन यह सीएसएस आपके लिए जरूरी है:

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

... और कक्षा को दूसरे कॉलम में जोड़ें:

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

संपादित करें:

ओह ... ऐसा लग रहा है कि जो मैं ऊपर लिख रहा था वह अति सुंदर है। पुल- एक्स -राइट क्लास बूटस्ट्रैप 4: एक्स में इसे दूसरे कॉलम में जोड़ें और इसे पूरी तरह से काम करना चाहिए।

Comments

ऑप्स ... मैंने स्टाइल कोड में गलती की: एक्स ट्राई अब। और अगर यह काम नहीं करेगा, तो जोड़ने का प्रयास करें!

— मारेक कुस

यह ऐसा ही है। मैंने बूटस्ट्रैप 4 से .pull-xs-right क्लास के साथ काम किया है।

— Cray

Answer 5

चूंकि कॉलम-ऑर्डर बूटस्ट्रैप 4 बीटा में काम नहीं करता है, जैसा कि ऊपर दिए गए उत्तर में दिए गए कोड में वर्णित है, आपको निम्नलिखित का उपयोग करने की आवश्यकता होगी (जैसा कि कोड 4 फ्लेक्सबॉक्स ऑर्डर डेमो में दर्शाया गया है - अल्फा / बीटा लिंक जो इसमें प्रदान किए गए थे उत्तर)।

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

हालांकि ध्यान दें कि "फ्लेक्सबॉक्स ऑर्डर डेमो - बीटा" एक अल्फा कोडबेस पर जाता है, और कोडबेस को बीटा (और इसे चलाने) के परिणामस्वरूप एक ही कॉलम में गलत तरीके से प्रदर्शित होने वाले divs में परिणाम होता है - लेकिन यह काटने के बाद से एक कोडवर्ड मुद्दे जैसा दिखता है। कोड से बाहर कोडिंग चिपकाने के रूप में वर्णित काम करता है।

Answer 6

आप मोबाइल ऑर्डर के साथ दो अलग-अलग कंटेनर कर सकते हैं और डेस्कटॉप स्क्रीन पर छिपा सकते हैं, दूसरा डेस्कटॉप ऑर्डर के साथ और मोबाइल स्क्रीन पर छिपा सकते हैं

Comments

यह काम करेगा, लेकिन यह अनावश्यक डेटा दोहराव है। आप इसे फ्लोट पैराट्रम के हेरफेर के साथ कर सकते हैं (और प्रोपबली कुछ अन्य तरीके भी)।

— मर्ककस