如何更改移动视图中 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

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

Answer 2

看看下面的代码。

起初，图像位于文本上方，但一旦宽度低于 400px，它就会跳到文本下方。为此，它使用两个类.computer-only和.mobile-only，这两个类是通过查询在 CSS 中定义的@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">

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

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