Responsive Flexbox with verticle Navigation Demo - SEO 2-3-1
As the viewport (or window width) decreases, the two main cols and navigation menu will adapt and change to become more mobile friendly.
RED is primary content - seo order 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel libero ac enim imperdiet commodo et ac nunc. Suspendisse vitae neque pharetra est ornare tincidunt non eget arcu. Vivamus cursus faucibus elit ut laoreet. Nunc nec ante faucibus metus viverra egestas.
Aenean nulla mauris, imperdiet ac mattis volutpat, viverra quis elit. Aliquam erat volutpat. Nulla venenatis quam vitae metus rhoncus quis sollicitudin enim dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget fringilla diam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus eu odio auctor rhoncus. Donec eget orci neque. Sed tristique, turpis ut congue commodo, lectus erat fermentum erat, in scelerisque elit dolor vel sapien.
Integer ultricies sem id elit tincidunt sed rutrum lorem mollis. Proin tincidunt, quam a suscipit posuere, sem lorem hendrerit risus, eu gravida urna turpis vitae ligula. Integer est nunc, luctus eget interdum et, interdum quis lorem.
BLUE is secondary - seo order 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus eu odio auctor rhoncus. Donec eget orci neque. Sed tristique, turpis ut congue commodo, lectus erat fermentum erat, in scelerisque elit dolor vel sapien.
Integer ultricies sem id elit tincidunt sed rutrum lorem mollis. Proin tincidunt, quam a suscipit posuere, sem lorem hendrerit risus, eu gravida urna turpis vitae ligula. Integer est nunc, luctus eget interdum et, interdum quis lorem.
Green is Nav Menu - seo order 3
Notes
Note: Internet Explorer 9 and earlier versions do not support the flex property.
Note: Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).
Note: Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.
Note: CSS order Property - Browser Support:
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.