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




bootstrap-4 grid (4)

मेरे पास 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

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


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


चूंकि कॉलम-ऑर्डर बूटस्ट्रैप 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 गलत तरीके से एक ही कॉलम में प्रदर्शित होते हैं - लेकिन यह काटने के बाद से एक कोडवर्ड मुद्दे जैसा दिखता है। कोड से बाहर कोडिंग चिपकाने के रूप में वर्णित काम करता है।


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

कुछ इस तरह:

@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


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

<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>




grid