कॉलम-गिनती के साथ, क्या आप संकल्प छोटे होने पर गतिशील रूप से 3 से 2 कॉलम में बदल सकते हैं?

Question

मैं column-count प्रॉपर्टी का उपयोग कर रहा हूं ताकि एक पेज को तीन कॉलम पर एकाधिक divs के साथ सेट किया जा सके, जो बड़ी स्क्रीन पर बहुत अच्छा लग रहा है। प्रत्येक div की एक निश्चित चौड़ाई है, कहें, 500px (निहित छवियां)।

छोटी स्क्रीन पर काम करते समय, ब्राउज़र मूल \ तीन कॉलम के भीतर सामग्री को दो कॉलम पर जाने के लिए मजबूर करने का प्रयास करता है। जब सामग्री ओवरलैप होने लगती है तो सामग्री दो कॉलम पर जाने के लिए एक पसंदीदा तरीका है?

Answer 1

यदि आप संपत्ति का उपयोग column-count के बजाय करते हैं, तो ब्राउज़र स्वचालित रूप से उपलब्ध स्थान को भरने के लिए आवश्यक कॉलम की संख्या समायोजित करेगा।

http://codepen.io/cimmanon/pen/CcGlE

.foo { 
    columns: 500px; // shorthand, prefixes may be necessary 
} 

Answer 2

@media (max-width: 500px) { 
    .your element selector here { 
-webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count:   2; 

    } 
}