การจัดเรียงลำดับคอลัมน์ Grid System บน Bootstrap
เราสามารถทำได้ 2 แบบ คือ col-xs-pull และ col-xs-push โดยที่ col-xs-pull คือ เลื่อนคอลัมน์จากด้านขวาไปทางซ้าย และ col-xs-push คือการเลื่อนคอลัมน์จากด้านซ้ายไปทางขวา
<div class="row">
<div class="col-md-3 col-xs-push-9"> col-xs-3 col-xs-push-9 </div>
<div class="col-md-9 col-xs-pull-3"> col-xs-9 col-xs-pull-3 </div>
</div>
จาก code ด้านบน div ที่มี class col-xs-3 เดิมอยู่ในต่ำแหน่ง 1-3 จะถูกเลื่อนจากด้านซ้ายไปทางขวา 9 คอลัมน์ คือ ไปอยู่ที่ต่ำแหน่งคอลัมน์ 10-12 แทน
การจัดเรียงลำดับคอลัมน์ Grid System บน Bootstrap แบบเว้นคอลัมน์
วิธีการคือเราจะใช้ class ".col-md-offset-*" ซึ่งจะเป็นการเลื่อนเลื่อนคอลัมน์จากด้านซ้ายไปทางขวาตามค่าที่กำหนด ตัวอย่างเช่น
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
จาก code ด้านบน div ที่มี col-md-offset-4 เดิมอยู่ในต่ำแหน่ง 5-8 จะถูกเลื่อนจากด้านซ้ายไปทางขวา 4 คอลัมน์ คือ ไปอยู่ที่ต่ำแหน่งคอลัมน์ 9-12 แทน ซึ่งจะทำให้ตำแหน่งคอลัมน์ 5-8 เกิดเป็นช่องว่าง
สำหรับ md นั้นหมายถึงสำหรับหน้าจอที่มีขนาด < 768 px ถ้าเราต้องการเรียงลำดับคอลลัมน์บน Bootstrap ตามขนาดของ screen ของหน้าจออื่นๆ ต้องกำหนดค่าดังนี้
- col-xs-pull-* และ col-xs-push-* สำหรับหน้าจอที่มีขนาด < 768 px
- col-sm-pull-* และ col-sm-push-* สำหรับหน้าจอที่มีขนาด >= 768 px
- col-md-pull-* และ col-md-push-* สำหรับหน้าจอที่มีขนาด >= 992 px
- col-lg-pull-* และ col-lg-push-* สำหรับหน้าจอที่มีขนาด >= 1200 px
รับทําเว็บไซต์ 
แลกลิงค์ 
