اما زمانی که صفحه‌نمایش از سایز موبایل فراتر برود ترتیب باید فرق کند و ستون مطالب اصلی باید در وسط قرار بگیرد. هدف ما سفارشی کردن ستون‌بندی‌های سایت ما می‌باشد. همان‌طور که در عکس‌ها زیر مشاهده می‌کنیم:

ترتیب قرارگیری در سایزهای مختلف و درخواستی خود:

توییتر بوت استرپ برای سفارش سازی ستون‌بندی‌ها دو کلاسcol-*-push-x و  col-*-pull-x را برای راحتی کار ما طراحی کرده‌اند و می‌توان از آن استفاده کرد.

معرفی کلاس‌های push و pull

با استفاده از push و pull موقعیت‌های ستون‌های طراحی‌شده را تغییر می‌دهیم، کاملاً برعکس offset عمل می‌کنند. وقتی ستون را push می‌دهیم به موقعیت ستون‌های کنار خود اثری نمی‌گذارد مثلاً اگر دوتا ستون داشته باشیم اگر ستون اول دارای کلاس push باشد ستون دوم در همان مکان باقی می‌ماند و به سمت راست (در بوت استرپ rtl به سمت چپ) فشرده نمی‌شوند، offset ستون‌های کنار خود را به سمت راست هل می‌دهد؛ اما pull ستون را به سمت چپ می‌برد؛ و تأثیری بر روی ستون‌های کناری خود نمی‌گذارد.

• col-*-push-x: ستون را به تعداد  x  به سمت راست می‌کشد که مقدارش از 1 تا 12 می‌باشد. *از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.
• col-*-pull-x: ستون را به تعداد x به سمت چپ می‌کشد که مقدارش از 1 تا 12 می‌باشد. * از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.

با مثال زیر بهتر آشنا خواهید شد و نحوه استفاده کردن کلاس‌ها

<div class="row">
    <div class="col-sm-5 col-sm-push-5">Content B</div>
    <div class="col-sm-5 col-sm-pull-5">Content A</div>
    <div class="col-sm-2">Content C</div>
</div>

The post سفارشی کردن ستون‌های سایت با توییتر بوت استرپ appeared first on وب دیزاین.