Push items with margins.

import {Col,Row} from '@/core';
import {Icon} from '@/packages';

// Push item 1 from left
<Row>
    {items.map((item, idx) => (
        <Row key={item} push={is(idx, 1) ? 'left' : null}>
            <Icon variant="heart" fill="var(--error-200)" />
        </Row>
    ))}
</Row>

// Push item 0 from top
<Col>
    {items.map((item, idx) => (
        <Row key={item} push={is(idx, 0) ? 'top' : null}>
            <Icon variant="heart" fill="var(--error-200)" />
        </Row>
    ))}
</Col>

Code snippet hidden

Your screen is too small.

ColToRow and flex order helps with ratio.

Card will reorder on portrait.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

UTILITY CLASS .self-portrait-first to Avatar