如何在移动视图中更改div的顺序？

Question

在此示例中，我希望我的图像列堆叠在移动视图中的文本信息列下方。我将如何实现？

我曾尝试过使用flexbox，但是我没有运气，如果有人可以向我解释这一点，将不胜感激。谢谢

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

Answer 1

请看下面的代码。

起初，图像在文本上方，但是宽度在400px以下时，它将跳转到文本下方。为此，它使用.computer-only和.mobile-only这两个类，它们是使用@media查询在CSS中定义的。

.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">

要将其应用于您的示例，请忽略HTML代码，但将CSS添加到样式中。然后，您可以将这两个类添加到所需的任何元素中。

此外，将400px更改为您定义为移动设备和计算机之间的边界！

Answer 2

使用display：flex和order。更改订单编号以更改屏幕上的位置。此外，您需要针对较小的屏幕进行媒体查询。为了查看所有效果，请在整页上进行检查并拖动屏幕。

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