This is the Base Layout using media queries in the CSS file, and markups for container, rows and columns in the HTML file. The above label with screen sizes are for demo purposes. Adjust the window size and see how it changes.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, autem! Debitis totam rerum ducimus fuga ipsum quod aliquid nihil expedita atque fugit accusamus quis nam adipisci sit sed porro, ab mollitia possimus iure odio libero veritatis laborum. Iusto eius tempora voluptatem totam! Maxime quas doloribus alias, adipisci ipsa cum aperiam?
One Whole Column
One-half Column
One-half Column
One-third Column
One-third Column
One-third Column
One-third Column
Two-thirds Column
One-fourth Column
One-fourth Column
One-fourth Column
One-fourth Column
One-third Column Centered
One-half Column Centered
Two-thirds Column Centered