Side-by-side elements on large screens and centered on small screens

Question

How can i display elements side-by-side on large screens, float left & right, and centered one above the other on small screens? If possible without media queries:

Answer 1

Here is the code;

.abc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

<div class="abc">
    <div>first element</div>
    <div>second element</div>
    <div>third element</div>
    <div>forth element</div>
</div>