丁香园AV

Content Management System

Home / Working in AEM / Component Styles / Column styles - CLF4

Column styles - CLF4

red block

grey block

light-red block

block col-1-red col-3-red

block col-2-grey

block col-3-light-red

full width, block red

full width, block red, content-narrow

md stack
mds-stack

Size range Name CSS classes
528 px 鈥� 979 px Medium md-stack, md-stack-last, md-stack-first
528 px 鈥� 754 px Medium-small mds-stack, mds-stack-last, mds-stack-first
up to 527 px Small Columns will always stack on top of each other at this screen size

md-stack-first
mds-stack-first

Desktop layout
Tablet layout
Mobile layout

md-stack-last
mds-stack-last

Desktop layout
Tablet layout
Mobile layout

md-stack-first-last
mds-stack-first-last

Desktop layout
Mobile layout
Desktop layout. Two Column control components with "No spacing" selected, each contains an Image and a Text component. The first Column Control component has "grey block" and "md-stack" CSS Classes, the second Column Control component has "grey block" and "md-stack-last-first" CSS Classes. Both text component have "pad-all" CSS Class.
Mobile layout