আমি কীভাবে মোবাইল বিন্যাসে বুটস্ট্র্যাপ 3 কলামের ক্রম পরিবর্তন করব?

Question

আমি একটি শীর্ষ স্থির নববারের সাথে একটি প্রতিক্রিয়াশীল বিন্যাস তৈরি করছি। আমার নীচে দুটি কলাম রয়েছে, একটি সাইডবারের জন্য (3) এবং একটিতে সামগ্রী (9)। ডেস্কটপে যা দেখতে এরকম দেখাচ্ছে

নাবার
[3] [9]

আমি যখন resizeমোবাইলে মোবাইলটি navbarসংকুচিত এবং গোপন করি তখন সাইডবারটি সামগ্রীটির উপরে স্ট্যাক করে রাখা হয়:

নাবার
[3]
[9]

আমি শীর্ষে মূল বিষয়বস্তু চাই, তাই আমার মোবাইলের অর্ডারটি এটিতে পরিবর্তন করতে হবে:

নাভবার
[9]
[3]

আমি এই নিবন্ধটি পেয়েছি যা একই পয়েন্টগুলিকে অন্তর্ভুক্ত করে, তবে গ্রহণযোগ্য উত্তরটি সম্পাদনা করে বলা হয়েছে যে সমাধানটি বুটস্ট্র্যাপের বর্তমান সংস্করণে প্রযোজ্য নয়।

আমি কীভাবে এই কলামগুলিকে মোবাইলে পুনরায় অর্ডার করতে পারি? অথবা বিকল্পভাবে, আমি কীভাবে সিডবারের তালিকা-গ্রুপটিকে আমার প্রসারিত নাবারে পেতে পারি?

আমার কোডটি এখানে:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Answer 1

আপনি ছোট পর্দায় কলামগুলির ক্রম পরিবর্তন করতে পারবেন না তবে আপনি এটি বড় পর্দায় করতে পারেন।

সুতরাং আপনার কলামের ক্রম পরিবর্তন করুন।

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

ডিফল্টরূপে এটি প্রথমে মূল বিষয়বস্তু প্রদর্শন করে।

তাই মোবাইলের মূল সামগ্রীটি প্রথমে প্রদর্শিত হয়।

ব্যবহার করে col-lg-pushএবং col-lg-pullআমরা কলামগুলি বড় স্ক্রিনগুলিতে পুনরায় অর্ডার করতে পারি এবং ডানদিকে বাম দিকে এবং প্রধান সামগ্রীটি প্রদর্শন করতে পারি।

কাজ এখানে বেড়ান ।

Comments

এটাই আমি চেয়েছিলাম এবং আপনার উত্তরটি নির্ভুলভাবে বোঝায়, ধন্যবাদ!

— ব্যবহারকারী3000310

@ কেন, আপনি কেন এটি বৃহত্তর নির্দিষ্ট করেছেন? সরকারী উদাহরণে মধ্যম জন্য কাজ করে বলে মনে হচ্ছে। getbootstrap.com/css/#grid

— লুচাক্স

আমি ভাবছিলাম যে পুশ এবং টান ক্লাসগুলি কী জন্য ভাল - এখন আমি জানি। ধন্যবাদ।

— সিডননার

Push.০ পুশ / পুল সরকারীভাবে প্রকাশের অল্প সময়ের মধ্যেই কোনও পর্দার আকারে ( ক্স

— জিম

এর জন্য ধন্যবাদ. এই মার positioning cols absolutelyও এমন!

— র‌্যাডমেশন

Answer 2

আপডেট হয়েছে 2018

বুটস্ট্র্যাপ 3 ভিত্তিক মূল প্রশ্নের জন্য , সমাধানটি ছিল পুশ-পুল ব্যবহার করা ।

ইন বুটস্ট্র্যাপ 4 এটা এখন সম্ভব ক্রম পরিবর্তন করতে, এমনকি যখন কলাম পূর্ণ- প্রস্থের সজ্জিত হয় , বুটস্ট্র্যাপ 4 flexbox ধন্যবাদ উল্লম্বভাবে। ওএফসি, পুশ পুল পদ্ধতিটি এখনও কাজ করবে তবে বুটস্ট্র্যাপ ৪-এ কলামের ক্রম পরিবর্তন করার অন্যান্য উপায় রয়েছে, এতে পূর্ণ-প্রস্থের কলামগুলি পুনরায় অর্ডার করা সম্ভব হয়েছে।

পদ্ধতি 1 - পর্দার flex-column-reverseজন্য ব্যবহার করুন xs:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

পদ্ধতি 2 - পর্দার order-firstজন্য ব্যবহার করুন xs:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

বুটস্ট্র্যাপ 4 (আলফা 6): http://www.codeply.com/go/bBMOsvtJhD
বুটস্ট্র্যাপ 4.1: https://www.codeply.com/go/e0v77yGtcr

---

মূল 3.x উত্তর

বুটস্ট্র্যাপ 3 ভিত্তিক মূল প্রশ্নের জন্য , সমাধানটি ছিল বৃহত্তর প্রস্থের জন্য পুশ-পুল ব্যবহার করা এবং তারপরে কলামগুলি তাদের ছোট (এক্সএস) প্রস্থগুলিতে প্রাকৃতিক ক্রম দেখায়। (এবি বিএ বিপরীতে)।

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

বুটস্ট্র্যাপ 3: http://www.codeply.com/go/wgzJXs3gel

@ ইমর জানিয়েছে, " আপনি ছোট পর্দায় কলামগুলির ক্রম পরিবর্তন করতে পারবেন না তবে আপনি এটি বড় পর্দায় করতে পারেন "। যাইহোক, এটি এটিকে স্পষ্ট করে বলা উচিত: "আপনি বুটস্ট্র্যাপ 3 -এ পূর্ণ প্রস্থের " স্ট্যাকড "কলামগুলির ক্রম পরিবর্তন করতে পারবেন না ।

Answer 3

এখানে উত্তরগুলি কেবলমাত্র 2 টি কোষের জন্য কাজ করে, তবে যতক্ষণ না এই কলামগুলিতে আরও বেশি থাকে তা আরও কিছুটা জটিলতার দিকে নিয়ে যেতে পারে। আমি মনে করি একাধিক কলামে কয়েকটি সংখ্যক কক্ষের জন্য আমি একটি সাধারণ সমাধান পেয়েছি।

গোল

ডিজাইনটি ট্যাবলেট / ডেস্কটপটিতে যেভাবে আদেশ দেয় সেগুলিতে নিজেকে সাজানোর জন্য মোবাইলে ট্যাগগুলির উল্লম্ব ক্রম পান। এই কংক্রিটের উদাহরণে, একটি ট্যাগ অবশ্যই প্রবাহের আগে প্রবেশ করায় সাধারণত এটি প্রবাহের আগে প্রবেশ করানো উচিত এবং অন্যটি সাধারণত এটির চেয়ে আগে।

মুঠোফোন

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

ট্যাবলেট + +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

সুতরাং শিরোনামটি ঠিক ট্যাবলেট + এ এবং প্রযুক্তিগতভাবে ডেস্কের মতোই বদলানো দরকার - এটি মোবাইলে এর আগে ক্যাপশন ট্যাগের উপরে বসে আছে। আপনি এক মুহুর্তে দেখতে পাবেন 4 ক্যাপশনটিও সমস্যায় রয়েছে।

আসুন ধরে নেওয়া যাক প্রতিটি ঘর উচ্চতায় পরিবর্তিত হতে পারে এবং তার পরবর্তী ঘরটি (টেবিলের মতো দুর্বল কৌশলগুলি বাতিল করে) শীর্ষে থেকে নীচে ফ্লাশ করা দরকার।

সমস্ত বুটস্ট্র্যাপ গ্রিড সমস্যার মতো পদক্ষেপ 1 হ'ল এইচটিএমএলটি পৃষ্ঠাতে 1 2 3 4 5, মোবাইল-অর্ডারে থাকা অনুধাবন করা। তারপরে, কীভাবে ট্যাবলেট / ডেস্কটপটি এইভাবে নিজেকে পুনঃক্রম করতে হবে তা নির্ধারণ করুন - আদর্শভাবে জাভাস্ক্রিপ্ট ছাড়াই।

বাম দিকে নয় ডান দিকে যাবার 1 headlineএবং 3 qtyবসার সমাধানটি কেবল তাদের উভয়কেই সেট করা pull-right। এটি সিএসএস প্রয়োগ করে float: right, এর অর্থ তারা প্রথম খোলা জায়গা তারা ডানায় ফিট করবে। আপনি নিম্নলিখিত ক্রমে ব্রাউজারের সিএসএস প্রসেসরটির কথা ভাবতে পারেন: 1 ডান উপরের কোণায় ফিট করে। 2 এর পরের এবং নিয়মিত ( float: left), তাই এটি উপরে-বাম কোণে যায়। তারপরে 3, যা float: rightএটি 1 এর নীচে নেমে আসে।

তবে এই সমাধানটি যথেষ্ট ছিল না 4 caption; কারণ ডান 2 টি কোষ 2 imageবাম দিকে এত সংক্ষিপ্ত উভয়গুলির সংমিশ্রণের চেয়ে দীর্ঘ হতে পারে। বুটস্ট্র্যাপ গ্রিড একটি মহিমান্বিত ভাসা হ্যাক হয়, অর্থ 4 caption হয় float: left। সঙ্গে 2 imageবাম এত রুম দখল, 4 captionপ্রচেষ্টা পরবর্তী উপলব্ধ স্থান মাপসই - প্রায়ই ডান কলাম, না করে ছেড়ে যেখানে আমরা এটা চেয়েছিলেন।

এখানে সমাধানের (এবং আরও সাধারণভাবে এর মতো আরও সমস্যার জন্য) সমাধানটি হ'ল মোবাইলে লুকানো একটি হ্যাক ট্যাগ যুক্ত করা tablet যা ট্যাবলেটটিতে উপস্থিত ছিল + ক্যাপশনটি ধাক্কা দেওয়ার জন্য, যেটি তখন নেতিবাচক ব্যবধানে আচ্ছাদিত হয়ে যায় - এর মতো:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

এইচটিএমএল:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

সিএসএস:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

সুতরাং, এখানে সাধারণ সমাধান হ্যাক ট্যাগগুলি যুক্ত করা যা মোবাইলে অদৃশ্য হয়ে যায়। ট্যাবলেটে + হ্যাক ট্যাগগুলি প্রবাহে প্রদর্শিত ট্যাগগুলি আগে বা পরে প্রদর্শিত হতে দেয়, তারপরে সেই হ্যাক ট্যাগগুলি কভার করতে টানা বা নীচে নেমে আসে।

দ্রষ্টব্য: আমি লিঙ্কযুক্ত জেসফিডেলের সাধারণ উদাহরণের জন্য স্থির উচ্চতা ব্যবহার করেছি, তবে যে আসল সাইটের সামগ্রীতে আমি কাজ করছিলাম তা সমস্ত 5 টি ট্যাগের উচ্চতায় পরিবর্তিত হয়। এটি ট্যাগ উচ্চতাগুলিতে তুলনামূলকভাবে বড় বৈকল্পিকতা, বিশেষত চিত্র এবং ডেস্কের সাথে সঠিকভাবে রেন্ডার করে।

দ্রষ্টব্য 2: আপনার লেআউটের উপর নির্ভর করে আপনার ট্যাবলেট + (বা আরও বড় রেজোলিউশনগুলি) এর সাথে একটি সামঞ্জস্যপূর্ণ পর্যাপ্ত কলাম অর্ডার থাকতে পারে, যা আপনি হ্যাক ট্যাগগুলির ব্যবহার এড়াতে পারবেন, margin-bottomপরিবর্তে এর মতো:

নোট 3: এটি বুটস্ট্র্যাপ 3 ব্যবহার করে Boot বুটস্ট্র্যাপ 4 একটি ভিন্ন গ্রিড সেট ব্যবহার করে, এবং এই উদাহরণগুলির সাথে কাজ করবে না।

http://jsfiddle.net/b9chris/52VtD/16632/

Comments

এই দুর্দান্ত ব্যাখ্যার জন্য আপনাকে অনেক ধন্যবাদ। আমি এখন 3 দিন কাজের মতো অনুরূপ কিছু নিয়ে কাজ করছি এবং কোথায় যাব জানি না, তা রেখেছি। ধন্যবাদ!

— kdweber89

সেরা ... আপনাকে ধন্যবাদ ❤️

— mghhgm

Answer 4

অক্টোবর 2017

আমি আরেকটি বুটস্ট্র্যাপ 4 সমাধান যুক্ত করতে চাই। যে আমার জন্য কাজ করেছে।

মিডিয়া ক্যোয়ারির সাথে মিলিত সিএসএস "অর্ডার" বৈশিষ্ট্য কলামগুলি যখন ছোট স্ক্রিনে সজ্জিত হয় তখন তাদের পুনঃ অর্ডার করতে ব্যবহার করা যেতে পারে।

এটার মতো কিছু:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

কোডপেন লিংক: https://codepen.io/preston206/pen/EwrXqm

স্ক্রিনের আকারটি সামঞ্জস্য করুন এবং আপনি কলামগুলি পৃথক ক্রমে সজ্জিত দেখতে পাবেন।

আমি এটিকে মূল পোস্টারের প্রশ্নের সাথে যুক্ত করব। সিএসএসের সাহায্যে নাভবার, সাইডবার এবং সামগ্রীগুলি লক্ষ্যবস্তু করা যায় এবং তারপরে একটি মিডিয়া ক্যোয়ারির মধ্যে বৈশিষ্ট্যগুলি প্রয়োগ করা যায়।

Answer 5

ইন বুটস্ট্র্যাপ 4 , আপনি এটির মতো কিছু করতে চাইলে:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

আপনি ক্রম বিপরীত প্রয়োজন বি তারপর সি তারপর আবেদন order-{breakpoint}-firstকরতে বি । এবং দুটি পৃথক সেটিংস প্রয়োগ করুন, এটি তাদের একই কলস ভাগ করে তুলবে এবং অন্যটি তাদের 12 টি কোলের পুরো প্রস্থ গ্রহণ করতে সক্ষম করবে:

• ছোট পর্দা: বি থেকে 12 টি কল এবং সি থেকে 12 টি কলস

• বড় পর্দা: তাদের যোগফলের মধ্যে 12 টি কলস ( বি + সি = 12)

এটার মত

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

ডেমো: https://codepen.io/anon/pen/wXLGKa

Answer 6

InsertAfter () বা insertBefore () ব্যবহার করে jQuery এর সাহায্যে এটি বেশ সহজ।

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

এটা সহজ

আপনি যদি মোবাইল ডিভাইসের জন্য ও শর্ত নির্ধারণ করতে চান তবে আপনি এটিকে এটি তৈরি করতে পারেন

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

উদাহরণ https://jsfiddle.net/w9n27k23/

Comments

আপনি যখন কেউ এইচটিএমএল / সিএসএস আর্কিটেকচারের সাহায্যে সমস্যাটি সংশোধন করতে জেএস ব্যবহার করছেন দেখেন তখন এটি সত্যিই খারাপ অনুভূতি। আপনি সমস্যাটি সংশোধন করছেন না, আপনি কেবল এটি লুকিয়ে রাখছেন।

— জারকো জোভিচ

@ জারকোভিচ তাই কি? কখনও কখনও জেএস সমাধানগুলি আরও বেশি কার্যকর হতে পারে। বুটস্ট্র্যাপ খাঁটি সিএসএস দিয়ে তৈরি নয়, এটি জেএসও ব্যবহার করে।

— ন্যানোরিপার

Answer 7

প্রথমে মোবাইল সংস্করণ দিয়ে শুরু করে আপনি বেশিরভাগ সময় যা চান তা অর্জন করতে পারেন।

উদাহরণ এখানে:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>