Websites with a responsive design make it easy to read content across a variety of devices.
It allows for interaction without needing to resize or scroll because the content is placed in a flexible grid that changes based on screen size.
Responsive design also removes the need to design separately for mobile devices since every device is served from a unified design.
Responsive design helps you make beautiful websites! Yet, attention should be paid to where content is placed because it will get rearranged.
Hint: group similarly themed content boxes in the same column so the information stays together.
There is a predictable pattern for how columns get rearranged.
For instance, this three-column page layout where the highlight of the page is centered in the top-center of the page.
Now consider this same layout on a phone.
Notice how the main content is not on top anymore. This important content might get overlooked since it is buried below the left column.
