Positionner le div de droite sur celui de gauche en vue mobile

Question

Est-il possible d'empiler la div de droite sur la div de gauche en vue mobile à l'aide de CSS ? Le comportement par défaut est que la division de droite flotte sous la division de gauche.

CSS :

.left {
    position: relative;
    float: left;
    background: #F48024;
    width:576px;
    height: 324px;
}
.right {
    position: relative;
    float: left;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

HTML :

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

Pour le comprendre, regardez le schéma s'il vous plaît. Je veux la troisième disposition donnée dans ce diagramme.

Answer 1

Vous pouvez y parvenir en utilisant la boîte flexible ! Changez votre css en ceci :

.main{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

.left {
    position: relative;
    background: #F48024;
    width:576px;
    height: 324px;
}

.right {
    position: relative;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

@media screen and (min-width:1152px){
  .main {
      justify-content: space-between;
  }

  .left {
      order:2;
  }

  .right {
      order:1;
  }
}

La propriété order détermine quel élément s'empile en premier. Vous pouvez en savoir plus sur la boîte flexible ici : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Cela peut servir de solution rapide.

@media screen and (max-width:480px){
    .main {
        display: flex;
        flex-direction: column-reverse;
    }
}

Nota:

Il se peut que vous deviez utiliser d'autres props css liés à la flexion pour aligner et justifier le contenu des divs - des props tels que justify-content et align-items

Mais si vous avez beaucoup de divs, ils seront tous inversés.

div-n
...
div-2
div-1

Answer 3

Vous pouvez faire quelque chose comme ceci en utilisant media query

div {
  width: 500px;
  height: 200px;
}

.left-div {
  float: left;
  background-color: yellow;
}

.right-div {
  float: left;
  background-color: green;
}

@media only screen and (max-width: 1000px) {
  .left-div {
    margin-top: 200px;
    position: absolute;
  }
  .right-div {
    position: absolute;
  }
}

<div class="left-div">left</div>
<div class="right-div">right</div>