3 Columns (default)

Template แบบ 3 คอลัมน์ โดยมีคอลัมน์ทั้งด้านซ้ายและขวา

<div class='leftsidebar clear'>
    <div class='content'>
        <div class='rightsidebar clear'>
            <div class='content'>
                .....
            </div>
            <aside class='sidebar'>
                ....
            </aside>
        </div>
    </div>
    <aside class='sidebar'>
        .....
    </aside>
</div>

การแสดงผลแบบสามคอลัมน์คือการนำเอาโค้ดการแสดงผลแบบสองคอลัมน์มาซ้อนกัน ซึ่งการแสดงผลด้วยวิธีนี้จะทำให้มีพื้นที่สำหรับแถบข้าง คงที่เสมอ

จุดเด่นของวิธีนี้คือ สามารถกำหนดการเรียงลำดับของคอลัมน์เมื่อแสดงบนมือถือได้ โดยที่บนมือถือจะมีการเรียงลำดับตาม HTML (บล๊อคที่อยู่ก่อนจะแสดงผลก่อน) ในขณะที่บน Desktop จะเป็นการแสดงผลตามลำดับของคลาสที่กำหนด

ยกตัวอย่างโค้ดด้านบน เมื่อแสดงผลใน Desktop จะเห็นคอลัมน์ ล่างสุด (สีม่วง) แสดงผลก่อน ตามด้วยส่วนที่เป็น เนื้อหา (สีแดง) และคอลัมน์ อีกอัน (สีน้ำเงิน) ตามลำดับ แต่หากเปิดใน มือถือจะมีการเรียงลำดับตาม tag นั่นคือ สีแดง, สีน้ำเงิน และ สีม่วง เป็นรายการสุดท้าย