@media only screen and (max-width: 500px) {
    .foto { display: none; }
    .fotox { display: block; text-align: center; }
}
@media only screen and (min-width: 501px) {
    .fotox { display: none; }
    .foto { display: block; }
}