3 Column 4 Row Responsive Template
In this example using GRID and media queries, there is a header, a navigation row, three columns and a footer.
On smaller screens, the columns will stack on top of each other.
Resize the browser window to see how the layout changes using media queries to get the responsive effect.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Common breakpoints for widths of devices:
320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.
Use pre code to display the HTML & CSS code in a web page to others.
Use HTML Formatter to indent the code.