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

【问题标题】：How do I change the order of my divs in mobile view?如何在移动视图中更改 div 的顺序？
【发布时间】：2020-04-22 20:25:34
【问题描述】：

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

我尝试使用 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>

【问题讨论】：

尝试在row上更改flex-direction？
你使用的是 Bootstrap 3 还是 4？

标签： html css twitter-bootstrap flexbox

【解决方案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>

【讨论】：

【解决方案2】：

看看下面的代码。

起初，图像在文本上方，但一旦宽度低于 400 像素，它就会跳到文本下方。为此，它使用 .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 更改为您定义的移动设备和计算机之间的边界！

【讨论】：