एक अर्थपूर्ण-ui स्टैकेबल ग्रिड

Question

में कॉलम को पुन: क्रमबद्ध करना मैं वर्तमान में सिमेंटिक-यूआई फ्रेमवर्क उत्तरदायी क्षमताओं के साथ खेल रहा हूं और स्टैकेबल ग्रिड का उपयोग करते समय मैंने दीवार को मारा। विशेष रूप से, मैं एक क्लासिक फ्रंट पेज लेआउट को दोहराने की कोशिश कर रहा था जहां बड़े पैराग्राफ और चित्र एक तिहाई और दो तिहाई कॉलम में लेआउट होते हैं, जो बाएं और दाएं विकल्प होते हैं।

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="six wide column"> 
     <img alt="Left image" /> 
    </div> 
    <div class="ten wide column"> 
     <p>Right content</p> 
    </div> 
</div> 

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="ten wide column"> 
     <p>Left content</p> 
    </div> 
    <div class="six wide column"> 
     <img alt="Right image" /> 
    </div> 
</div> 

मैं सभी वर्गों के लिए इस पैटर्न को दोहराता हूं और हर तरफ दोनों तरफ से कॉलम को स्वैप करता हूं। बात यह है कि, जब ग्रिड ढेर होता है, तो मैं छवि को सामग्री के शीर्ष पर रखना चाहता हूं। यह पहले मामले के लिए ठीक काम करता है क्योंकि कॉलम पहले से ही सही क्रम में हैं, लेकिन सामग्री के बाद छवि को रखा जाने के बाद स्पष्ट रूप से दूसरे ब्लॉक के लिए असफल हो जाते हैं।

मैं सोच रहा था कि इसे पूरा करने का कोई आसान तरीका है या इसे केवल जावास्क्रिप्ट का उपयोग करके किया जा सकता है? क्या मुझे ग्रिड का उपयोग करना चाहिए या क्या मुझे कुछ और इस्तेमाल करना चाहिए? अगर मुझे जावास्क्रिप्ट का उपयोग करने की ज़रूरत है, तो ग्रिड के लेआउट परिवर्तन का पता लगाने का सबसे अच्छा तरीका क्या होगा?

यह मेरी पहली बार उत्तरदायी डिजाइन कर रहा है, इसलिए इस विषय पर संदर्भों का स्वागत है।

Answer 1

यह ग्रिड तत्व के reversed भिन्नता का उपयोग करना संभव है। मेरा सुझाव है कि दूसरे ग्रिड के लिए निम्नलिखित:

<div class="ui stackable grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <h2>Full width header</h2> 
     </div> 
    </div> 
    <div class="computer reversed row"> 
     <div class="six wide column"> 
      <img alt="Right image" /> 
     </div> 
     <div class="ten wide column"> 
      <p>Left content</p> 
     </div> 
    </div> 
</div> 

डिफ़ॉल्ट रूप से पहली छवि लाना और केवल कंप्यूटर स्क्रीन आकार पर पीछे जोखिम है कि छवि खड़ी कॉलम के साथ अंत में हो सकता है कम करता है। यह स्क्रीन आकारों की संभावना को छोड़ देता है जहां कॉलम स्टैक्ड होने से पहले छवि बाईं ओर दिखाई देती है, लेकिन यह एक समस्या कम गंभीर होनी चाहिए।