4 Columns #2 (4 to 2 to 1)
This example shows 4 columns of content.
The content order with the 2/2 version is (A C)/(B D). See this same layout with the columns stacked (A B)/(C D).
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 3 columns, then 6 columns, then 12 columns.
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 3 columns, then 6 columns, then 12 columns.
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 3 columns, then 6 columns, then 12 columns.
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 starts off as being 3 columns, then 6 columns, then 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.
