.test-flex {
    display: flex;
    flex-direction: column;
}

.test-flex-item1 {
    background-color:green;
    flex: 100%;
}

.test-flex-item2 {
    background-color: yellow;
    flex: 33%;
}

.test-flex-item3 {
    background-color: blue;
    flex: 50%;
}

@media screen and (min-width: 576px) {
    .test-flex {
        flex-direction: row;
    }

    .test-flex-item1 {
    }

    .test-flex-item2 {
    }

    .test-flex-item3 {
    }
}