Demande d'aide - portfolio responsive Bootstrap

Bonjour ! Je suis plutôt débutant en programmation et souhaite me créer un portfolio, étant graphiste. Je suis pour cela parti d'un template Bootstrap que je modifie pour faire correspondre le site à mes goûts.

Seulement, je suis arrivé face à un problème que j'ai du mal à résoudre. Sur certaines pages de mon portfolio, mes créations sont présentés comme sur la photo "Exemple", en alternance :




Etant donné que je souhaite mon portfolio reponsive, en réduisant la taille de l'écran, les éléments se superposent verticalement les uns aux autres. On a donc parfois le Texte au dessus de la Video correspondante, et parfois l'inverse. Je souhaiterais, dans cette configuration de petit écran, avoir toujours le Texte au-dessus de la vidéo correspondante.

J'ai essayé une piste en utilisant "flex-direction" mais je ne sais pas encore bien m'en servir.

Bonjour merisso,

C'est simple, lorsque le texte passe en-dessous de ta vidéo tu dois appliquer ceci sur ta div parent :

flex-direction: column-reverse;

Cela inversera l'ordre de tes éléments dans ta div et le texte se retrouvera au-dessus de la vidéo. Applique cette propriété sur les divs correspondantes .
Modifié par Friesstyle (20 Nov 2019 - 16:23)

Bonjour, merci pour ta réponse !

J'avais déjà pensé à utiliser cette propriété, le soucis étant qu'en l'utilisant, le texte/video se retrouvent l'un au-dessus de l'autre, peu importe la taille de l'écran. (Je ne souhaite cet effet que sur un petit écran, pour avoir un portfolio responsive)

Que peut-on écrire pour que ce flex-direction ne s'applique que lorsque l'on réduit la taille de l'écran ?

Il faut entourer ta propriété par une media

@media (max-width: 767px) {
    div {
        flex-direction: column-reverse;
    }
}