A responsive demo showing reordering of content blocks at different viewport widths (below 768px, 768-1023px and 1024px upwards). This demo uses flexbox and the order property.

At the narrowest viewport, the five feature blocks are full-width with a blockquote above and below feature block 4.

At the next break point, the first four feature blocks form two columns and are followed by the first blockquote. Feature block 5 remains full width and the final blockquote drops to the bottom.

At the final break point, the first three feature blocks sit side by side followed by the first blockquote. Feature blocks 4 and 5 then sit side by side and are followed by the final blockquote.

View the CodePen and resize your browser to view the different break points.