Suviant SFNT Header Image Content Flip Layout

[Viscott]

Currently the Header Image Content is set for a large image on the left column and 2 smaller images on the right column, what would the correct class to use to flip them so the large image is on the right?

Is there any documentation on the CSS classes for columns?

<div class="column whole align-center uppercase event-message h1 nm ultrabold heading-decoration"><mvt:item name="readytheme" param="banner( 'storefront-message' )" /></div>
<div class="breaker clear"></div>
<div class="column hide medium-show medium-half align-center">
<mvt:item name="readytheme" param="image( 'storefront_promo' )" />
</div>
<div class="column whole medium-half align-center">
<mvt:item name="readytheme" param="image( 'storefront_new' )" />
</div>
<div class="column whole medium-half align-center">
<mvt:item name="readytheme" param="image( 'storefront_sale' )" />
</div>
<div class="breaker clear"></div>

[Viscott]

Re: Suviant SFNT Header Image Content Flip Layout

Bumpy, bump, bump... any insight on the correct column css for flipping the layout?

[Matt Zimmermann]

Re: Suviant SFNT Header Image Content Flip Layout

Hi Jon,

Due to the nature of the grid layout, there is not a simple way to flip those columns. You should be able to restructure them like this though to get the results you are looking for:

<div class="column whole align-center uppercase event-message h1 nm ultrabold heading-decoration"><mvt:item name="readytheme" param="banner( 'storefront-message' )" /></div>
<div class="breaker clear"></div>
<div class="column whole medium-half align-center">
    <mvt:item name="readytheme" param="image( 'storefront_new' )" />
    <mvt:item name="readytheme" param="image( 'storefront_sale' )" />
</div>
<div class="column whole medium-half align-center">
    <mvt:item name="readytheme" param="image( 'storefront_promo' )" />
</div>
<div class="breaker clear"></div>