3 Equal Columns #2 (3 to 2/1 to 1)

This example shows a basic layout with some full-width content, and 3 equal columns of content.

This time the three columns drop to a 2-column/1-column stack at "small" sized viewports, then stack single-column at the "extra-small" size. This keeps the line-lengths from getting too short.

Your viewport is currently displaying "extra small" "small" "medium" "large" layout (using Bootstrap layouts).

(A) Headline for Content

On a 12-column-grid layout, this content block starts off as being 4 columns, then 6 columns, then 12 columns.

placeholder

Vivamus accumsan non metus non condimentum. Nulla iaculis vehicula pretium. Sed vel velit ut augue consectetur auctor. Nunc porttitor lectus id orci tempor, non laoreet tortor euismod. Nullam suscipit purus et libero malesuada, in ornare lectus convallis. Phasellus at egestas leo. Phasellus nec malesuada mauris, pulvinar cursus felis. In mauris odio, placerat id ultrices quis, auctor nec libero. Phasellus sed placerat justo. Ut vel diam faucibus ipsum convallis sagittis sit amet ac enim. Nam lobortis eu urna eget rutrum.

(B) Headline for Content

On a 12-column-grid layout, this content block starts off as being 4 columns, then 6 columns, then 12 columns.

placeholder

Proin eu pharetra magna. Cras lobortis velit quis enim rutrum, nec fermentum nunc sodales. Etiam sed ante dui. Quisque aliquam vestibulum neque, at interdum tortor feugiat vitae. Integer mi sem, gravida ut justo et, aliquet rhoncus magna. Donec nibh sapien, consectetur vitae laoreet fermentum, mollis at purus. Vestibulum dignissim, tortor id tempor rhoncus, dui tortor vulputate leo, vitae tempus est metus nec massa. Integer sollicitudin iaculis purus, sed luctus quam imperdiet et.

(C) Headline for Content

On a 12-column-grid layout, this content block starts off as being 4 columns, then 12 columns.

placeholder

Vivamus lorem tellus, ullamcorper id sagittis et, elementum sit amet justo. Aenean tincidunt ante sed magna sodales, quis ornare neque pretium. Curabitur rhoncus non enim eu tincidunt. Morbi egestas arcu et diam consequat ultricies. Aenean dapibus turpis lacus, et adipiscing velit vulputate et. Quisque eget nunc mattis, ornare nulla non, faucibus lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sollicitudin nec dolor eu bibendum.

(D) Headline for Content

On a 12-column-grid layout, this content block is always 12 columns.

Aenean ac mi ac enim tristique iaculis. Proin a turpis diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sodales, lectus non consequat elementum, risus nisl aliquet nisi, facilisis pharetra odio lacus a augue. Pellentesque imperdiet ac felis eu facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ante massa, imperdiet vitae orci ac, aliquam accumsan leo. Aenean magna dui, consequat nec nunc in, ultricies cursus ligula. Curabitur lobortis odio in volutpat pulvinar. Quisque ac odio sed justo dapibus ullamcorper eget sed elit. Integer lectus erat, consectetur ac mauris in, convallis auctor massa. Aenean nec massa ac nisi porttitor vehicula quis id ligula. Nunc ut posuere massa. Cras justo mi, ultricies a sem sit amet, euismod tempus orci.