V tomto příkladu jsme vytvořili záhlaví, tři nestejné sloupce a zápatí. Na menších obrazovkách se sloupce naskládají na sebe.
Změňte velikost okna prohlížeče, abyste viděli responzivní efekt.
Rozlišení nižší 1200: Nahoře nám zůstává Hlavička, pod ní se řadí prostřední blok vedle levý blok a pod ním pravý blok a zápatí.
Rozlišení nižší 800: Nahoře nám zůstává Hlavička, pod ní se řadí prostřední blok, poté levý blok, následuje pravý blok a zápatí.
Lorem ipsum dolor sit amet consectetuer sodales turpis vitae et eu. At a parturient condimentum sodales Aliquam dolor et tristique congue lacus. Nulla lacinia eget fringilla hendrerit nisl turpis In pellentesque fames ut. Hendrerit tortor nulla pede felis hendrerit vel semper vel rutrum congue. Phasellus Curabitur neque turpis sapien auctor condimentum tortor Vestibulum Aliquam dictumst. Sit laoreet nibh enim convallis id et metus adipiscing sed natoque. Lacinia In.
Morbi cursus Vestibulum non elit Aenean nibh adipiscing et at est. Magna lorem laoreet nulla pede quis elit et convallis eget Mauris. Nam In Aliquam metus sapien aliquet non a pellentesque amet congue. Nisl auctor adipiscing Nullam Lorem Vestibulum feugiat Curabitur Curabitur orci sit. Id wisi sed pellentesque egestas rutrum arcu ac parturient laoreet ullamcorper. Consectetuer felis lacus Nullam Curabitur vitae Lorem Phasellus nec mattis eget. Aliquam fringilla.
Eu nibh congue Vestibulum justo pellentesque turpis quis justo sem Nulla. Aenean pretium Pellentesque Cum et Phasellus mauris nunc habitasse egestas pretium. Pulvinar ligula vel urna vitae lorem laoreet dis tellus Cras ullamcorper. Arcu turpis velit congue ac a at Donec libero tincidunt risus. Vitae habitant id dignissim Curabitur consectetuer at sollicitudin.
Adipiscing tortor mollis vel id hendrerit id condimentum pede Maecenas nulla. In auctor sodales Nunc turpis enim pulvinar interdum elit risus nibh. Nec adipiscing pretium nibh pretium Donec In cursus adipiscing lorem mauris. Nulla laoreet fringilla nascetur porttitor volutpat eros dui augue wisi Integer. Tincidunt eu massa Suspendisse id mi pretium vitae cursus malesuada Curabitur.
Condimentum sagittis id lacus neque id netus ut a et pellentesque. Ullamcorper venenatis at vel mi orci interdum mi vitae condimentum ornare. Porttitor Cum leo sed id tincidunt porttitor nec non in vitae. Quis dapibus justo elit Nam tellus vel sit laoreet libero wisi. Nibh condimentum Curabitur accumsan sagittis iaculis turpis mauris urna neque tortor. Metus laoreet wisi eu velit lobortis justo laoreet volutpat.
Lorem ipsum dolor sit amet consectetuer Sed elit fringilla cursus Vestibulum. Nam Nunc interdum lacus quis elit eros feugiat Nunc et Nunc. Ante quis congue accumsan cursus consequat Pellentesque et Nam egestas nibh. Eleifend nibh facilisi ullamcorper adipiscing arcu nunc dictumst Morbi Curabitur leo. At et pretium dolor at euismod odio libero justo Donec Nam. Hendrerit Nam Curabitur nunc Vestibulum quis vel tincidunt pretium.
Ante molestie vitae ac felis Ut Curabitur penatibus et pede consectetuer. Ac vitae lacus et consectetuer Curabitur velit Vestibulum justo elit felis. Vestibulum Nulla tellus Pellentesque pulvinar pretium at Pellentesque nibh at congue. Euismod a metus malesuada Vestibulum enim Aenean laoreet eu mi Pellentesque. Volutpat netus orci aliquet Nullam Sed pretium hendrerit enim lorem congue. Vitae leo vitae.