JavaScript/CSS-এ এক Div-এর সাপেক্ষে অন্য Div পজিশন করা (Flexbox)

CSS Flexbox-এ flex-direction: column-reverse ব্যবহার করে ডিভ এলিমেন্টগুলো উল্টো ক্রমে প্রদর্শন করা যায়। এটি JavaScript ছাড়াই লেআউট রি-অর্ডারিং mogelijk।

CSS কোড

.container {
    display: flex;
    flex-direction: column-reverse; /* বাচ্চা এলিমেন্টগুলো উল্টো ক্রমে */
}

পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Reverse Demo</title>
    <style>
        .demo {
            display: flex;
            flex-direction: column-reverse;
            gap: 10px;
        }
        .demo > div {
            padding: 20px;
            background: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="demo1">DIV_DEMO1 (HTML-এ প্রথম)</div>
        <div class="demo2">DIV_DEMO2 (HTML-এ দ্বিতীয়)</div>
    </div>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি flexReverse.html নামে সংরক্ষণ করুন।
2. ব্রাউজারে ওপেন করুন।

দৃশ্যমান ফলাফল

দেখাবে: DIV_DEMO2 উপরে, DIV_DEMO1 নিচে (HTML অর্ডারের উল্টো)।

Flexbox ডিরেকশন অপশনগুলো

JavaScript-এ ডাইনামিক পরিবর্তন

const container = document.querySelector('.demo');
container.style.flexDirection = 'column-reverse'; // JS দিয়ে পরিবর্তন

অন্যান্য পজিশনিং টেকনিক

• order প্রপার্টি: `
  ` - নির্দিষ্ট এলিমেন্ট আগে/পিছনে।
• position: absolute: প্যারেন্ট `relative` হলে টপ/লেফট দিয়ে পজিশন।
• CSS Grid: `grid-template-areas` দিয়ে লেআউট কন্ট্রোল।

নোট

এটি শুধু ভিজ্যুয়াল রি-অর্ডারিং। DOM অর্ডার অপরিবর্তিত থাকে (স্ক্রিন রিডার, ট্যাব নেভিগেশন HTML অর্ডার মেনে চলে)।