css - w3school - বুটস্ট্র্যাপ 4, কলামগুলির ক্রমটি কীভাবে বিপরীত হয়?

Question

css - w3school - বুটস্ট্র্যাপ 4, কলামগুলির ক্রমটি কীভাবে বিপরীত হয়?

বিপরীত শব্দ সকল (2)

আপনি যদি order-md- চেয়ে বড় আকারের ক্রম পরিবর্তন করতে চান তবে আপনি order-md- ব্যবহার করতে পারেন, এটি bootstrap দ্বারা সরবরাহ করা হয়েছে। দেখে মনে হচ্ছে, আপনি যদি কেবলমাত্র md আকারে অর্ডার পরিবর্তন করতে চান তবে আপনাকে একটি বৃহত আকারের Fiddle স্বাভাবিক ক্রম সংজ্ঞায়িত করতে হবে

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

https://src-bin.com

আমার এই সাধারণ দৃশ্য আছে:

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

মূলত যদি md

A
B

আমি এটি চাই, md যদি

B
A

ওয়েবে পাওয়া অনেকগুলি রূপের চেষ্টা করেছি, যেমন flex-first এবং হোয়াট নোট .. এটি কার্যকর হয় বলে মনে হয় না

কোন ধারনা?

Answer #1

এই সমস্যাটি সমাধান করার জন্য flex- সহায়ক ক্লাসগুলি ব্যবহার করাও সম্ভব। এই সমাধানটি আপনাকে কলামগুলিতে অর্ডার গণনা ছাড়াই আদেশটিকে বিপরীত করতে দেয়।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

flex-direction এখন ডিফল্ট (এমডি) দ্বারা বিপরীত হয় এবং এলজি ব্রেকপয়েন্টে ওভাররাইড করা হবে।