Inverser deux DIV en responsive

Version imprimable

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:

<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:

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>

19/03/2021, 17h40
NoSmoking
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:

1 2 3 4 .element-body { display: flex; flex-direction: column-reverse; }
mais tout sera inversé, ou alors
Code:

1 2 3 4 5 6 7 .element-body { display: flex; flex-direction: column; } .element-lien { order: -1; }
19/03/2021, 18h17
flexi2202

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
19/03/2021, 18h23
NoSmoking

Citation:

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.
19/03/2021, 18h25
flexi2202

merci pour la réponse

pourrais tu stp m expliquer ce code merci

merci
j ai essaye en voulant placer le titre de la carte sous essai 2
mais cela ne fonctionne pas

Code:

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>

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:

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>

On va commencer par le début.

Citation:

que quand l écran est plus petit que 576

Citation:

@media (min-width: 576px

pas sûr que tu ais saisie ce que tu faisais.

Citation:

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:

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:

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; } }
Citation:

comment je pourrais m y prendre

une solution également est de lire, ou de intéresser à, la documentation ;).

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:

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:

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:

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>

20/03/2021, 11h44
NoSmoking

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 !

merci pour l aide

donc comme ceci

Code:

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:

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>