.tabs {
    display: flex;
    flex-wrap: wrap;
}

    .tabs > label {
        order: 1;
        display: block;
        padding: .5rem;
        margin-right: 0.2rem;
        cursor: pointer;
        background: #76B7F3;
        font-weight: bold;
        transition: background ease 0.2s;
        margin-bottom: 0;
    }

    .tabs .tab {
        order: 99;
        flex-grow: 1;
        width: 100%;
        display: none;
        padding: 1rem;
        background: #f2f2f2;
    }

    .tabs input[type="radio"] {
        display: none;
    }

        .tabs input[type="radio"]:checked + label {
            background: #f2f2f2;
        }

            .tabs input[type="radio"]:checked + label + .tab {
                display: block;
            }

/*@media (max-width: 45em) {
.tabs .tab,
.tabs label {
order: initial;
}

.tabs > label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}*/