การกำหนดให้เนื้อหาแสดงผลก่อนไซด์บาร์บนอุปกรณ์โมบาย

การทำร้านค้าออนไลน์ ให้แสดงผลบน Mobile Devices ในส่วนที่เป็นหน้ารวมสินค้า ถ้าดีไซน์มาเป็น right sidebar อยู่แล้วคงไม่มีปัญหาเวลาดูบนอุปกรณ์โมบาย เพราะ sidebar จะปัดไปอยู่ล่าง main content อยู่แล้ว แต่ในกรณีที่ดีไซน์มาเป็น left sidebar เวลาลูกค้ากด add to cart เราคงไม่อยากให้ sidebar ขึ้นมาอยู่ก่อน main content ในขั้นตอนการไปสู่หน้า cart และหน้า checkout

วิธีแก้ปัญหา

ผมแก้ปัญหาโดยใช้วิธีง่ายๆ โดยให้ sidebar อยู่ล่าง main content และกำหนดให้ #sidebar float:left และ #main float:right บนหน้าจอตั้งแต่ 981px ขึ้นไปตามโค้ดด้านล่างครับ