时间戳

首页 > 解决方案 > 如何在移动视图中更改 div 的顺序？

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

问题描述

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

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

标签： htmlcsstwitter-bootstrapflexbox

解决方案

看看下面的代码。

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

推荐阅读