[divider_padding]
[responsive_text compression=”23″ fontSize=”34″ min=”16″][icon_font type=”bullhorn” color=”#CC2D2D” size=”large” rotate=”horizontal”] • JUST STRIKING MULTIFLEX OFFERS YOU • [icon_font type=”bullhorn” color=”#CC2D2D” size=”large”][/responsive_text]
[responsive_text compression=”10″ fontSize=”87″]CONTENT CHOREOGRAPHY[/responsive_text][framed_box width=”80%” bgColor=”transparent” borderColor=”transparent” borderThickness=”0″ align=”center”][responsive_text compression=”35″ min=”14″ lineHeight=”1.65″ ]In responsive sites, the blocks of content get rearranged differently depending on the screen width and resolution in order to give a better experience to the user. That is performed automatically, but sometimes it is desirable to have it done in a particular way, in one word, to have more control over the process. Striking Multiflex is the first theme to offer Content Choreography for that purpose, so you can decide how the different columns move around on the smaller devices. For the following examples try resizing the width of your browser with your mouse.[/responsive_text] [/framed_box]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”45″ thickness=”2″ width=”30%”]
[responsive_text compression=”36″ max=”27″ min=”16″ lineHeight=”1.65″ fontSize=”20″]SOME EXAMPLES
[icon_font type=”arrow-down” color=”#CC2D2D” size=”large”][/responsive_text]
[divider_padding]
[divider_padding]
[responsive_text compression=”25″ min=”26″ fontSize=”32″ lineHeight=”1.225″]Six-Column Layout – Three Possible Choreographies[/responsive_text]
[responsive_text compression=”50″ min=”14″ lineHeight=”1.65″ ]If your six columns are related to each other with a specific logic then they should be rearranged in a concrete way in narrower screens. A picture is worth a thousand words so let’s have a look at the following examples.[/responsive_text]
[divider_padding]
[responsive_text compression=”35″ min=”22″ fontSize=”26″]6 columns become 1[/responsive_text]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”35″ thickness=”1″ width=”100%”]
[one_sixth][icon_font type=”group” color=”#cc2d2d” size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris. [divider_padding]
[/one_sixth]
[one_sixth] [icon_font type=”coffee” color=”#2795d1″ size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth] [icon_font type=”camera” color=”#cc2d2d” size=”3x” pull=”left”] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type=”globe” color=”#2795d1″ size=”3x” pull=”left”] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type=”trophy” color=”#cc2d2d” size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth_last][icon_font type=”dashboard” color=”#2795d1″ size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth_last]
[toggle title=”Get the Code”][code]
[one_sixth][icon_font type=”group” color=”#cc2d2d” size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris. [divider_padding]
[/one_sixth]
[one_sixth] [icon_font type=”coffee” color=”#2795d1″ size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth] [icon_font type=”camera” color=”#cc2d2d” size=”3x” pull=”left”] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type=”globe” color=”#2795d1″ size=”3x” pull=”left”] At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth][icon_font type=”trophy” color=”#cc2d2d” size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth]
[one_sixth_last][icon_font type=”dashboard” color=”#2795d1″ size=”3x” pull=”left”]At vero eos et accusam et justo duo dolores et ea rebum. Uterim enim ad minimaelieri veniam, quisetunae nostrud exercitation ullamco laboris.[divider_padding]
[/one_sixth_last]
[/code][/toggle]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”60″ thickness=”1″ width=”100%”]
[responsive_text compression=”35″ min=”22″ fontSize=”26″]6 columns become 2[/responsive_text]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”0″ thickness=”1″ width=”100%”]
[iconbox icon=”comment” iconColor=”#cc2d2d” title=”comment” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”comment-o” iconColor=”#cc2d2d” title=”comment-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bookmark” iconColor=”#2795d1″ title=”bookmark” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bookmark-o” iconColor=”#2795d1″ title=”bookmark-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bell” iconColor=”#cc2d2d” title=”bell” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bell-o” iconColor=”#cc2d2d” title=”bell-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[toggle title=”Get the Code”][code]
[iconbox icon=”comment” iconColor=”#cc2d2d” title=”comment” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”comment-o” iconColor=”#cc2d2d” title=”comment-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bookmark” iconColor=”#2795d1″ title=”bookmark” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bookmark-o” iconColor=”#2795d1″ title=”bookmark-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bell” iconColor=”#cc2d2d” title=”bell” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[iconbox icon=”bell-o” iconColor=”#cc2d2d” title=”bell-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum.[/iconbox]
[/code][/toggle]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”60″ thickness=”1″ width=”100%”]
[responsive_text compression=”35″ min=”22″ fontSize=”26″]6 columns become 3[/responsive_text]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”0″ thickness=”1″ width=”100%”]
[iconbox icon=”check” iconColor=”#cc2d2d” title=”check” type=”center”][/iconbox]
[iconbox icon=”check-circle” iconColor=”#cc2d2d” title=”check-circle” type=”center”][/iconbox]
[iconbox icon=”check-circle-o” iconColor=”#cc2d2d” title=”check-circle-o” type=”center”][/iconbox]
[iconbox icon=”facebook” iconColor=”#2795d1″ title=”facebook” type=”center”][/iconbox]
[iconbox icon=”google-plus” iconColor=”#2795d1″ title=”google-plus” type=”center”][/iconbox]
[iconbox icon=”twitter” iconColor=”#2795d1″ title=”twitter” type=”center”][/iconbox]
[toggle title=”Get the Code”][code]
[iconbox icon=”check” iconColor=”#cc2d2d” title=”check” type=”center”][/iconbox]
[iconbox icon=”check-circle” iconColor=”#cc2d2d” title=”check-circle” type=”center”][/iconbox]
[iconbox icon=”check-circle-o” iconColor=”#cc2d2d” title=”check-circle-o” type=”center”][/iconbox]
[iconbox icon=”facebook” iconColor=”#2795d1″ title=”facebook” type=”center”][/iconbox]
[iconbox icon=”google-plus” iconColor=”#2795d1″ title=”google-plus” type=”center”][/iconbox]
[iconbox icon=”twitter” iconColor=”#2795d1″ title=”twitter” type=”center”][/iconbox]
[/code][/toggle]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”100″ thickness=”1″ width=”100%”]
[responsive_text compression=”25″ min=”26″ fontSize=”32″ lineHeight=”1.225″]Four-Column Layout – Two Possible Choreographies[/responsive_text]
[responsive_text compression=”50″ min=”14″ lineHeight=”1.65″ ]If your four columns are related to each other with a specific logic then they should be rearranged in a concrete way in narrower screens. A picture is worth a thousand words so let’s have a look at the following examples.[/responsive_text]
[divider_padding]
[responsive_text compression=”35″ min=”22″ fontSize=”26″]4 columns become 1[/responsive_text]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”35″ thickness=”1″ width=”100%”]
[icon_font type=”hand-o-up” color=”#c12f2f” size=”5x” pull=”left”]
Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
[divider_padding]
[icon_font type=”hand-o-right” color=”#2692cc” size=”5x” pull=”left”]
At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu.sequat, vel illum dolore.
[divider_padding]
[icon_font type=”hand-o-down” color=”#c12f2f” size=”5x” pull=”left”]
At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit duo dolores et ea rebum.
[divider_padding]
[icon_font type=”hand-o-left” color=”#2692cc” size=”5x” pull=”left”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata.
[divider_padding]
[divider_padding]
[toggle title=”Get the Code”][code]
[icon_font type=”hand-o-up” color=”#c12f2f” size=”5x” pull=”left”]
Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
[divider_padding]
[icon_font type=”hand-o-right” color=”#2692cc” size=”5x” pull=”left”]
At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accu.sequat, vel illum dolore.
[divider_padding]
[icon_font type=”hand-o-down” color=”#c12f2f” size=”5x” pull=”left”]
At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit duo dolores et ea rebum.
[divider_padding]
[icon_font type=”hand-o-left” color=”#2692cc” size=”5x” pull=”left”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata.
[divider_padding]
[/code][/toggle]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”60″ thickness=”1″ width=”100%”]
[responsive_text compression=”35″ min=”22″ fontSize=”26″]4 columns become 2[/responsive_text]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”0″ thickness=”1″ width=”100%”]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”left”][iconbox icon=”star-o” iconColor=”#2692cc” title=”star-o” type=”center”]Lorem ipsum dolor sit amet. Stet clita kasd gubergren, searatum.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”right”][iconbox icon=”star” iconColor=”#2692cc” title=”star” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”left”][iconbox icon=”heart-o” iconColor=”#cc2d2d” title=”heart-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”right”][iconbox icon=”heart” iconColor=”#cc2d2d” title=”heart” type=”center”]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.[/iconbox]
[/framed_box]
[toggle title=”Get the Code”][code]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”left”][iconbox icon=”star-o” iconColor=”#2692cc” title=”star-o” type=”center”]Lorem ipsum dolor sit amet. Stet clita kasd gubergren, searatum.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”right”][iconbox icon=”star” iconColor=”#2692cc” title=”star” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum. Nam liber tempor.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”left”][iconbox icon=”heart-o” iconColor=”#cc2d2d” title=”heart-o” type=”center”]At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum.[/iconbox]
[/framed_box]
[framed_box width=”45%” bgColor=”transparent” borderColor=”transparent” align=”right”][iconbox icon=”heart” iconColor=”#cc2d2d” title=”heart” type=”center”]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.[/iconbox]
[/framed_box]
[/code][/toggle]
[divider_advanced color=”rgba(158,155,155,1)” paddingTop=”0″ paddingBottom=”100″ thickness=”1″ width=”100%”]
