Adaptações para mobile

Front-end
#1

Estou fazendo um exercício do curso, onde tenho que adaptar um site de desktop a outros aparelhos… Tenho esse elemento com imagens… Eu gostaria de saber como eu posso colocar as imagens e suas legendas de 3 em 3 uma embaixo da outra.

002

Obs: Segui o tutorial do curso, mas quando uso o width com o valor “auto” as imagens simplesmente somem.

Código curso :

.painel {
    width: auto;
}

.painel li	{
	width: 30%;
}
.painel img	{
    width: 100%;
}

Tirei o .painel com width: auto e as imagens voltaram a aparecer.

#2

Sem ver o código, fica meio difícil propor um código css, mas deixa o seu painel assim:

.painel {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}