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

  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 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    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 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    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>

  7. #7
    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
    je pense avoir compris le principe

    sur ma page j ai 10 cards
    je souhaite opérer le changement que sur 1 carte sur 2
    comment je pourrais m y prendre
    merci
    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
    38
    39
    40
    41
    42
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
     
     
     
    /* Standard syntax */
    .col-md-4   {order: 1;}
    .col-md-8 {order: 2;}
     
     
    @media (min-width: 576px)  {
     
     
    /* Standard syntax */
    .col-md-4   {order: 2;}
    .col-md-8 {order: 1;}
     
    }
    </style>
    </head>
    <body>
     
    <div class="card mb-3" style="max-width: 1440px;">
      <div class="row no-gutters">
        <div class="col-md-4">
          <img src="" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
     
     
    </body>
    </html>

  8. #8
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    On va commencer par le début.
    que quand l écran est plus petit que 576
    @media (min-width: 576px
    pas sûr que tu ais saisie ce que tu faisais.


    je souhaite opérer le changement que sur 1 carte sur 2
    Il te faut dans ce cas cibler ces éléments en leur ajoutant un classe que tu modifiera avec ton @media.

    Tu pourrais, par exemple, faire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body inverse-order">
        <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>
    et le CSS associé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media(max-width:576px) {
      .card-body.inverse-order {
        display: flex;
        flex-direction: column;
      }
      .card-body.inverse-order a {
        align-self: start;
        order: -1;
      }
    }

    comment je pourrais m y prendre
    une solution également est de lire, ou de intéresser à, la documentation .

  9. #9
    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
    un très grand merci
    c est génial tout ce que l on peux faire

    si a présent si je veux agir sur l image et la placer par exemple sous le paragraphe
    j ai essaye le code suivant ...
    mais apparement y a du avoir une erreur
    car rien ne se produit




    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body inverse-order">
        <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>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media(max-width:576px) {
      .card.inverse-order {
        display: flex;
        flex-direction: column;
      }
      .card.inverse-order img {
        align-self: start;
        order:2;
      }
    }

    cette syntaxe je suppose qu elle est valable


    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
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    /* Standard syntax */
    .a   {order: 1;}
    .b {order: 2;}
    @media (min-width: 576px)  {
    /* Standard syntax */
    .a   {order: 2;}
    .b {order: 1;}
    }
    </style>
    </head>
    <body>
     
    <div class="card mb-3" style="max-width: 1440px;">
      <div class="row no-gutters">
      <div class="b">
        <div class="col-md-4">
          <img src="https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcTElB2Bi3CarvurSXGDcOe0cKFRxw7peSD7x-g6PgZkXOQv1kQ-4tekLtxVkQeKRQ2B-EGkyjcWaUe8px3f7Na9RnSJwnPxC9G2&usqp=CAc" alt="...">
        </div>
    	</div>
    	<div class="a">
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>

  10. #10
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Sérieusement il te faut acquérir un minimum de bass, tu mets un order mais tu n'as pas d'élément en display:flex comme conteneur !

  11. #11
    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 l aide

    donc comme ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
        .box {
              display: flex;
              flex-direction: row;
            }
            .box :nth-child(1) { order: 2; }
            .box :nth-child(2) { order:1; }
    et comme ceci

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="row no-gutters">
            <div class="box">
                <div class="col-md-8">
                         <div class="card-body">
                            <h4 class="card-title">bla bla</h4>
                            <p class="card-text"> Bla bla
                            </p>
                         </div>
                      </div>
                <div class="col-md-4"> <img src="image/gardon-37cm-phil-perleur.JPG" class="w-100"> </div>
     
            </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