মোবাইল ভিউতে শীর্ষে ডান কলাম বুটস্ট্র্যাপ করুন

Question

আমার মতো বুটস্ট্র্যাপ পৃষ্ঠা রয়েছে:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

দেখতে:

-----
|A|B|
-----

সুতরাং আমি যদি এটি একটি মোবাইল ডিভাইসে দেখি তবে কলাম এ শীর্ষে রয়েছে তবে আমি বি শীর্ষে চাই want এটা কি সম্ভব? আমি এটি একটি টান দিয়ে চেষ্টা করেছিলাম, কিন্তু এটি কার্যকর হয়নি।

Comments

বুটস্ট্র্যাপ 4 এর জন্য সালমানিহাজীর উত্তর দেখুন

— schnawel007

Answer 1

এটি সম্পাদন করতে কলাম ক্রম ব্যবহার করুন ।

col-md-push-6কলামটি ডান 6 এ "ধাক্কা দেবে" এবং col-md-pull-6"এমডি" বা বৃহত্তর ভিউ-পোর্টগুলির বাম দিকে কলামটি "টান" দেবে। যে কোনও ছোট ভিউ-পোর্টগুলিতে কলামগুলি আবার স্বাভাবিক ক্রমে হবে।

আমি মনে করি যা লোককে ছুঁড়ে ফেলেছে তা হল আপনার এইচটিএমএলে আপনাকে বি এর A এর উপরে রাখতে হবে । এটি করার একটি ভিন্ন উপায় থাকতে পারে যেখানে এইচটিএমএল এ বি এর উপরে যেতে পারে তবে আমি কীভাবে এটি করব তা নিশ্চিত নই ...

ডেমো

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

ভিউ-পোর্ট> = এমডি

|A|B|

ভিউ-পোর্ট <এমডি

|B|
|A|

Comments

@ জ্যাক দ্য কেইনিফ এই প্রশ্নের অন্য উত্তরটি একবার দেখুন ... আপনি অন্য কলামটির প্রস্থের সাহায্যে একটি কলামটি চাপছেন বা টানবেন।

— শ্মলজি

@ স্ক্মলজি ও হ্যাঁ - অন্য উত্তরের আরও ভাল ব্যাখ্যা রয়েছে। এটিও

— কলামগুলি ব্যবহার করে-

তিনটি কলামে সমস্যা হচ্ছে, যেখানে স্ট্যাক অর্ডারটি মাঝখানে, বামে, ডানদিকে হওয়া উচিত।

— গুজ

Answer 2

এটি লক্ষণীয় যে আপনি যদি কলামগুলি ব্যবহার করছেন যা উভয়ই 6 টির সমান নয়, তবে পুশ পরিমাণ প্রাথমিক কলামের আকারের সমান হবে না।

আপনার যদি 2 টি কলাম রয়েছে (এ এবং বি) এবং এ কলামটি ছোট হতে চাইবে এবং "এসএম" বা বৃহত্তর ভিউপোর্টের ডানদিকে, তবে একটি মোবাইল (এক্স) ভিউপোর্টের উপরে, আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

অন্যথায়, কলামগুলির সারিবদ্ধতা প্রদর্শিত হবে।

Comments

আমি যখন অফসেট সেট করব তখন আমি <div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>

— এটিতে

Answer 3

ফ্লেক্সবক্স দিকনির্দেশ

বুটস্ট্র্যাপ 4 এর জন্য, আপনার .row বিভাগে নিম্নলিখিতগুলির একটি প্রয়োগ করুন:

.flex-row-reverse

প্রতিক্রিয়াশীল সেটিংসের জন্য:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Comments

কোনও ধারণা কীভাবে এটি অর্জন করতে হবে?

— রকিবুল হক

Answer 4

নীচের কোডটি আমার জন্য কাজ করে

.row {
    display: flex;
    flex-direction: column-reverse;
}

Answer 5

বুটস্ট্র্যাপ 4-এ, ধরা যাক আপনি বড় পর্দার জন্য একটি আদেশ এবং ছোট পর্দার জন্য একটি পৃথক ক্রম রাখতে চান:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

আপনি বাদ দিতে পারেন order-1এবং order-2উপরে। কেবল স্বচ্ছতার জন্য যুক্ত করা হয়েছে। ডিফল্ট অর্ডার হ'ল এইচটিএমএলে কলামগুলি প্রদর্শিত হবে।

আরও তথ্যের জন্য https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Answer 6

অর্ডার- # ক্লাস যুক্ত করে এটি এখন (বুটস্ট্র্যাপ v4 এ) সম্পন্ন হয়েছে।

Https://getbootstrap.com/docs/4.1/migration/#grid-system-1 দেখুন

এটার মত:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Answer 7

আমার কাছে বিভিন্ন আকারের তিনটি বুটস্ট্র্যাপ 4 কলাম রয়েছে। স্ক্রিনটি ছোট হওয়ার সাথে সাথে তৃতীয় কলামটি লুকানো থাকে, তারপরে যখন পর্দাটি আরও ছোট হয় এবং ডিভগুলি ক্রম পরিবর্তন করে যাতে কলাম 2 শীর্ষে থাকে।

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

আশা করি এটা কাজে লাগবে. আমি এটি বুঝতে অসুবিধা পেয়েছি তবে অবশেষে এই থ্রেডের সাহায্যে সেখানে পৌঁছেছি তবে এটি কিছুটা হিট এবং মিস ছিল।

Answer 8

এটি বুটস্ট্র্যাপ 4 এ আমার জন্য কাজ করেছে:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

Answer 9

আমি ব্যবহার করতাম:

.row {
   display: flex;
   flex-direction: row-reverse;
}

Answer 10

বুটস্ট্র্যাপ ভি 4-এ (জানুয়ারী 18, 2018 প্রকাশিত) আপনি পুনরায় অর্ডারিং ক্লাস ব্যবহার করতে পারেন। পুনর্নির্মাণ ট্যাবের অধীনে এখানে তথ্য।

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 11

বুটস্ট্র্যাপ 4 এর মধ্যে ফ্লেক্সের ক্লাস অন্তর্ভুক্ত থাকে। দেখুন: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>