如何更改移动视图中 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) {&nbsp;&nbsp; &nbsp; .row{&nbsp; &nbsp; &nbsp; &nbsp; display:flex;&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; flex-flow: row wrap;&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; div.text-test2{&nbsp; &nbsp; background:red;&nbsp; &nbsp; order: 1;&nbsp; }&nbsp; .col-lg-4{&nbsp; &nbsp; background:green;&nbsp; &nbsp; order: 2;&nbsp; }.purchase-icon-left{&nbsp; &nbsp; background:blue;&nbsp; &nbsp; order: 3;&nbsp; }}<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-4 col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="col-lg-8 col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; <div class="info-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="purchase-icon-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text-test2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Discover your desired items by browsing through eight different categories.</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Browse through thousands of items sold by other users. </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Don't agree with the price? Message the seller and request a price deduction. </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; </div></div>

Answer 2

看看下面的代码。起初，图像位于文本上方，但一旦宽度低于 400px，它就会跳到文本下方。为此，它使用两个类.computer-only和.mobile-only，这两个类是通过查询在 CSS 中定义的@media。.mobile-only {&nbsp; display: none;}@media (max-width: 400px) {&nbsp; .mobile-only {&nbsp; &nbsp; display: block;&nbsp; }&nbsp; .computer-only {&nbsp; &nbsp; display: none;&nbsp; }&nbsp;&nbsp;}<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为您定义的移动设备和计算机之间的边界！