मोबाइल दृश्य पर शीर्ष पर बूटस्ट्रैप राइट कॉलम

171

मेरे पास एक बूटस्ट्रैप पेज है:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

जैसा दिखता है:

-----
|A|B|
-----

इसलिए अगर मैं इसे एक मोबाइल डिवाइस पर देखता हूं, तो कॉलम ए शीर्ष पर है, लेकिन मुझे बी शीर्ष पर चाहिए। क्या यह संभव है? मैंने इसे एक पुल पुश के साथ करने की कोशिश की, लेकिन यह काम नहीं किया।

html css twitter-bootstrap-3

— schnawel007
स्रोत

2

बूटस्ट्रैप 4 के लिए सलमानिआज़ि का जवाब देखें

— schnawel007

268

इसे पूरा करने के लिए कॉलम ऑर्डरिंग का उपयोग करें।

col-md-push-6कॉलम को दाएं 6 पर "पुश" col-md-pull-6करेगा और कॉलम को बाईं ओर "md" या अधिक व्यू-पोर्ट पर "खींच" देगा। किसी भी छोटे दृश्य-पोर्ट पर कॉलम फिर से सामान्य क्रम में होंगे।

मुझे लगता है कि लोगों को क्या फेंकता है, यह है कि आपको अपने HTML में B को A से ऊपर रखना होगा । ऐसा करने का एक अलग तरीका हो सकता है जहां A, HTML में B से ऊपर जा सकता है, लेकिन मुझे यकीन नहीं है कि यह कैसे करना है ...

डेमो

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

दृश्य- port> = md

|A|B|

व्यू-पोर्ट <md

|B|
|A|

— Schmalzy
स्रोत

6

@JackTheKnife इस सवाल के दूसरे जवाब पर एक नज़र डालें ... आप दूसरे कॉलम की चौड़ाई से एक कॉलम को धक्का देते हैं या खींचते हैं।

— शिलाजी

1

@Schmalzy हे हाँ - अन्य उत्तर में बेहतर स्पष्टीकरण है। यह भी पाया गया कि उपयोगी: scotch.io/tutorials/reorder-css-columns-using-bootstrap

— JackTheKnife

1

तीन कॉलम से परेशान होना, जहां स्टैक ऑर्डर केंद्र, बाएं, दाएं होना चाहिए।

— हंस

78

यह ध्यान देने योग्य है कि यदि आप उन स्तंभों का उपयोग कर रहे हैं जो दोनों 6 के बराबर नहीं हैं, तो पुश राशि प्रारंभिक स्तंभ आकार के बराबर नहीं होगी।

यदि आपके पास 2 कॉलम हैं

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

अन्यथा, कॉलम का संरेखण बंद हो जाएगा।

— apritch
स्रोत

जब मैं ऑफसेट सेट का उपयोग करता हूं तो मैं इसका उपयोग कैसे कर सकता हूं<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>

— मुदासिर अब्बास

29

फ्लेक्सबॉक्स दिशा

बूटस्ट्रैप 4 के लिए, अपने .row div में निम्न में से एक लागू करें:

.flex-row-reverse

उत्तरदायी सेटिंग के लिए:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

— salmanhijazi
स्रोत

किसी भी विचार कैसे vuetify में एक ही प्राप्त करने के लिए?

— रकीबुल हक

10

नीचे दिए गए कोड मेरे लिए काम करते हैं

.row {
    display: flex;
    flex-direction: column-reverse;
}

— तलवार मैं
स्रोत

10

बूटस्ट्रैप 4 में, मान लें कि आप बड़ी स्क्रीन के लिए एक ऑर्डर और छोटी स्क्रीन के लिए एक अलग ऑर्डर करना चाहते हैं:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

आप छोड़ सकते हैं order-1और order-2ऊपर। सिर्फ स्पष्टता के लिए जोड़ा गया। डिफ़ॉल्ट ऑर्डर वह ऑर्डर होगा जो कॉलम html में दिखाई देगा।

अधिक जानकारी के लिए https://getbootstrap.com/docs/4.1/layout/grid/#reordering

— अब्राहम
स्रोत

5

यह अब क्रम में किया गया है (बूटस्ट्रैप v4 में) आदेश- # कक्षाएं जोड़कर।

Https://getbootstrap.com/docs/4.1/migration/#grid-system-1 देखें

ऐशे ही:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

— ओन्नो फेबर
स्रोत

4

मेरे पास विभिन्न आकारों के तीन बूटस्ट्रैप 4 कॉलम हैं। जैसा कि स्क्रीन छोटा हो जाता है तीसरा कॉलम छिपा होता है, फिर जब स्क्रीन छोटा हो जाता है और divs को स्टैक के क्रम में बदल दिया जाता है ताकि कॉलम 2 सबसे ऊपर रहे।

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

आशा है कि ये आपकी मदद करेगा। मुझे यह समझना मुश्किल लगा लेकिन आखिरकार इस धागे की मदद से वहाँ पहुँच गया, लेकिन यह थोड़ा हिट और मिस हो गया।

— M61Vulcan
स्रोत

3

इसने बूटस्ट्रैप 4 पर मेरे लिए काम किया:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

— मकबरे
स्रोत

2

मैंनें इस्तेमाल किया:

.row {
   display: flex;
   flex-direction: row-reverse;
}

— एरिक कोनर
स्रोत

0

बूटस्ट्रैप V4 में (जनवरी 18, 2018 को जारी किया गया) आप Reordering Classes का उपयोग कर सकते हैं। पुनरावर्ती टैब के तहत यहां जानकारी।

https://getbootstrap.com/docs/4.0/layout/grid/

— जुआन मिरल्स II
स्रोत

0

बूटस्ट्रैप 4 में फ्लेक्स के लिए कक्षाएं शामिल हैं। देखें: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>

— heady12
स्रोत