Dans cet exemple, je voudrais que ma colonne d'image se superpose sous la colonne d'informations de texte dans la vue mobile. Comment pourrais-je y parvenir?

J'ai essayé d'utiliser flexbox mais si je n'avais pas de chance, ce serait très apprécié que quelqu'un puisse m'expliquer cela. Merci

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="img/buy1.png" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="img/buy-icon.png" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>
0
Julien Littler 17 avril 2020 à 15:14

2 réponses

Meilleure réponse

Utilisez display: flex et order. Changer le numéro d'ordre pour changer la position à l'écran. De plus, vous devez avoir une requête multimédia pour un écran plus petit. Pour voir tous les effets, vérifiez-le en pleine page et faites glisser l'écran.

@media screen and (max-width: 750px) { 
    .row{
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;
  
    }
  div.text-test2{
    background:red;
    order: 1;
  }
  .col-lg-4{
    background:green;
    order: 2;
  }

.purchase-icon-left{
    background:blue;
    order: 3;
  }
}
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>
0
Vova 17 avril 2020 à 12:55

Jetez un œil au code ci-dessous.

Au début, l'image est au-dessus du texte, mais une fois que la largeur est inférieure à 400 px, elle passe en dessous du texte. Pour ce faire, il utilise les deux classes .computer-only et .mobile-only, qui sont définies dans le CSS à l'aide d'une requête @media.

.mobile-only {
  display: none;
}

@media (max-width: 400px) {

  .mobile-only {
    display: block;
  }

  .computer-only {
    display: none;
  }
  
}
<img class="computer-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Welcome to stackoverflow!

<img class="mobile-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Pour appliquer cela à votre exemple, ignorez le code HTML mais ajoutez le CSS à vos styles. Vous pouvez ensuite ajouter les deux classes à tous les éléments dont vous avez besoin.

Aussi, changez le 400px en ce que vous définissez comme la frontière entre le mobile et l'ordinateur!

0
Run_Script 17 avril 2020 à 12:30