usage Conditional css workaround

main.uss:
.col-1 {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}

.col-2-1 {
    width: 50%;
    flex-grow: 0;
    flex-shrink: 0;
}

.flex-cols {
    flex-direction: row;
    flex-wrap: wrap;
}

any uxml:
<VisualElement class="flex-cols">
    <Instance class="sm--col-1 lg--col-2-1" template="ProjectCard" name="player1"/>
    <Instance class="sm--col-1 lg--col-2-1" template="ProjectCard" name="player1"/>
    <Instance class="sm--col-1 lg--col-2-1" template="ProjectCard" name="player1"/>
</VisualElement>