IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Inverser deux DIV en responsive


Sujet :

Responsive design en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par défaut Inverser deux DIV en responsive
    bonjour a tous
    je sis sous boostrap et j utilise
    le module des cards

    je souhaiterais que lorsque l écran arrive a une certaine dimension que pars exemple
    ce bouton
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#" class="btn btn-primary">Go somewhere</a>

    se place sous la class body

    j ai essaye ce code mais sans succès

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <style>
     
     
    @media (min-width: 576px)  {
      .a{
            visibility: hidden;
        }
            .b{
            visibility: visible;
        }
    }
     
    </style>
        <title>Hello, world!</title>
      </head>
      <body>
      <div class ="a">
        <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    </div>
      <div class ="b">
        <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
       <a href="#" class="btn btn-primary">Go somewhere</a>
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     
      </div>
    </div>
    </div>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    pas sûr d'avoir bien compris ce que tu cherches à faire ... mais je lance une idée.

    Passe ton élément body en :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .element-body {
      display: flex;
      flex-direction: column-reverse;
    }
    mais tout sera inversé, ou alors
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .element-body {
      display: flex;
      flex-direction: column;
    }
    .element-lien {
      order: -1;
    }

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par défaut
    bonjour

    Merci pour la reponse

    en fait non je ne veux pas tout inverser la card


    dans la class card
    il y a la class body et dans cette class

    il y a
    celle avec le titre
    elle avec le texte
    celle avec le bouton


    je souhaiterais par exemple
    que quand l écran est plus petit que 576
    que le bouton prenne la place du titre

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    que le bouton prenne la place du titre
    si cela signifie que le bouton se place juste au dessus du titre alors la solution #2 fera le job.

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par défaut
    merci pour la réponse

    pourrais tu stp m expliquer ce code merci

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    348
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2009
    Messages : 348
    Par défaut
    merci
    j ai essaye en voulant placer le titre de la carte sous essai 2
    mais cela ne fonctionne pas

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <style>@media (min-width: 576px)  {
     .card-body {
      display: flex;
      flex-direction: column;
    }
    .card-title {
      order: -3;
    }
    }
     
    </style>
        <title>Hello, world!</title>
      </head>
      <body>
     
        <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
     
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    	<p class="essai">essai1</p>
    	 <p class="essai2">essai2</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
     
      </div>
    </div>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XHTML] Alignement de deux div
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 29/06/2006, 21h03
  2. [css]superposer deux DIVs / opacity
    Par narkhor dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/03/2006, 02h38
  3. [Débutant] Aligner deux divs sur une ligne avec inline
    Par Braz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/03/2006, 10h52
  4. [css] Deux div ( et plus ) sur la meme ligne
    Par NeHuS dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 22/02/2006, 15h54
  5. [CSS] Utilisation de deux div avec float
    Par Ditch dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/10/2005, 15h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo