html - डेस्कटॉप पर दो छोटे डिवीजनों के बगल में एक लंबा div और बूटस्ट्रैप 4 के साथ मोबाइल पर स्टैक्ड



css twitter-bootstrap (1)

आपको बड़ी चौड़ाई के लिए फ्लेक्सबॉक्स को अक्षम करना होगा क्योंकि बूटस्ट्रैप 4 के फ्लेक्सबॉक्स कॉलम को समान ऊंचाई देते हैं। फिर, फ़्लोट का उपयोग करें ताकि B और C कॉलम स्वाभाविक रूप से दाईं ओर खींचे, क्योंकि A लंबा है। Flexbox आदेश- मोबाइल पर कॉल को फिर से व्यवस्थित करने के लिए काम करेगा ...

एबीसी डेस्कटॉप, बीएसी मोबाइल

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

संबंधित: मोबाइल संस्करण पर विभिन्न क्रम के साथ बूटस्ट्रैप

यह here इस प्रश्न के समान here लेकिन थोड़ा अलग है।

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

मुझे इसका वर्णन करने में बहुत परेशानी हो रही थी इसलिए मुझे उम्मीद है कि तस्वीरें मदद करेंगी!

संपादित करें: यहां एक कोड स्निपेट है जो कोड को डुप्लिकेट करके काम करता है:

const Main = () => (
<section className="" id="section-2">
      <div className="container">
        <div className="row">
          <div className="col-12 d-md-none">
            <div className="text-center">
              <span className="text-uppercase small-text small-text--lighter">step 2</span>
            </div>
            <div className="text-center">
              <h2 className="text-center">HEADER 2</h2>
            </div>
          </div>
          <div className="col-12 col-md-6">
            <img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png" />
          </div>
          <div className="col-12 col-md-5 offset-md-1 text-center text-md-left">
            <div className="d-flex flex-column justify-content-between align-items-center align-items-md-start">
              <div className="d-none d-md-block">
                <span className="text-uppercase small-text small-text--lighter">step 2</span>
              </div>
              <div className="d-none d-md-block">
                <h2 className="">HEADER 2</h2>
              </div>
              <div>
                <p>SOME PARAGRAPH TEXT</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
)
ReactDOM.render(
  <Main />,
  document.getElementById("react")
);
img {
  height: auto;
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>





bootstrap-4