Stop offset for larger screen size

[giest4life]

Is there a way to offset columns for smaller screen sizes? For example, if I wanted wanted offset columns for sm and xs sizes I could do something like xsOffset={3} but this offset for all screen sizes. I tried adding mdOffset={0} or mdOffset to prevent it from offsetting medium or large screen sizes but it does not work.

[NeXTs]

damn I stuck at same problem

[NeXTs]

@roylee0704 how to cancel offset at larger screens? for example if I set xsOffset and I don't want to apply this offset for mdOffset settings mdOffset={0} doesn't make effect, the problem is - rules from smaller sizes inherits to larger sizes. it's not the way how it worked at common bootstrap, for example

[jacargentina]

@NeXTs i'm interested on fix this thing on my own version here https://jacargentina.github.io/react-flexbox-grid/. Please could you put a full code example for me to test?

[mattlo]

Looks like the issue is how it's implemented.

https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Col.js#L57

The code iterates through props then builds out the styles in the order of the props.

Workaround

To circumvent, place the largest offsets last to override the CSS specificity. When Object.keys() iterates over the props, the later defined props will override the earlier defined ones.

Works

<Col xs={12} smOffset={3} sm={6} mdOffset={4} md={4}>

Doesn't work

<Col xs={12} mdOffset={4} md={4} smOffset={3} sm={6}>