* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: whitesmoke;
}

.caja1 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja2 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja3 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja4 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja5 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja6 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja7 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja8 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja9 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja10 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja11 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja12 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja13 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

.caja14 {
    border: 2px black solid;
    background-color: #ef9a2b;
    height: 100px;
}

.caja15 {
    border: 2px black solid;
    background-color: purple;
    height: 100px;
}

@media (min-width: 0px) and (max-width: 991px) {
    .caja1, .caja3, .caja5, .caja7, .caja9, .caja11, .caja13, .caja15 {
        background-color: aqua;
    }
    .caja2, .caja4, .caja6, .caja8, .caja10, .caja12, .caja14 {
        background-color: brown;
    }
}
    

@media (min-width: 991px) and (max-width: 1200px) {
    .caja1, .caja3, .caja5, .caja7, .caja9, .caja11, .caja13, .caja15 {
        background-color: lightcoral;
    }
    .caja2, .caja4, .caja6, .caja8, .caja10, .caja12, .caja14 {
        background-color: bisque;
    }
}