If simple design is adopted for your website, you do not need to use Bootstrap
or CSS frameworks to make things complicated. This post shows how to write a
simple responsive layout by CSS media query.
In the following demo, the layout consists of two columns (left column and right
column). If the screen width is larger than 767px, left column will be 70%
wide and right column will be 30% wide. If the screen width is less than
767px, both left and right columns are 100% wide and left column will be on
top of right column.
<!doctype html><html><head><metacharset="utf-8"><title>Simple Custom Responsive Grid Layout</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"type="text/css"href="style.css"></head><body><divclass="left-column"style="background-color: yellow">
View this page on devices with screen width larger than 767px
and also on devices with screen width less than 767px.
You can use Chrome "Device Mode and Mobile Emulation" to
view this page as mobile devices
Add the following line in the head section of your HTML. Otherwise
CSS media query will not work.