根据设备屏幕更改元素位置？答案

【问题标题】：Changing elements position based on device screen?根据设备屏幕更改元素位置？
【发布时间】：2019-09-10 23:01:17
【问题描述】：

我想提出一个想法来解决我遇到的一个非常具体的问题。我有一个网页设计，基本上是这样的：

<div class="row">
    <div id="home-img" class="col-6">
    ******An Image Goes Here******
    </div>
    <div class="col-6">
        <div class="row">
            <div id="locate" class="col-12">
           ******Content Here******
            </div>
            <div id="order" class="col-12">
           ******Content Here******
            </div>
        </div>
    </div>
</div>

我正在使用 Bootstrap 4 构建网站，上面的类只是为了展示我是如何在脑海中构建设计的，欢迎对结构进行任何更改，以便它可以满足我的需要。

因此，当我在手机或平板电脑上查看该网站时，我试图想办法将带有 id="locate" 的 div 移动到 id="home-img" 上方，但将 id="order" 保持在 id="home-image" 下方.

我想不出一种设置 HTML 的方法，所以这样做更容易。我需要整个部分像桌面上的一行，两列，第二列又是两行；但在移动设备上，让第一列位于第一行的第一列之上。

我想在设备屏幕上显示以下结构。

桌面视图。

----------------------------------------
|                      |  Content Here |
|  An Image Goes Here  |----------------
|                      |  Content Here |
----------------------------------------

移动视图

------------------------
|  Content Here        |
------------------------
|  An Image Goes Here  |
------------------------
| Content Here         |
------------------------

【问题讨论】：

您可以使用css grid system。但老实说，我不知道引导网格系统的解决方案
我建议您查看 Flexbox 和媒体查询。 Flexbox 的order 属性可以帮助您重新排序元素。媒体查询用于根据屏幕大小设置 CSS 样式。 See here 的示例，您可以自己查看和测试代码以了解其行为方式。
@SirExotic 我实际上正在研究该属性，但我认为这不适用于我设置 HTML 的方式，在这种情况下我必须摆脱“行”并且只有 3 个弹性项目，对吗？每个“div”一个？
就我个人而言，我会摆脱 Bootstrap 行，或者使用 Bootstrap 的reordering。

标签： html css bootstrap-4 flexbox

【解决方案1】：

您可以使用 media query 内的 order 属性。

问题在于#locate 位于.col-6 内部的.row 内部，而order 仅适用于sibling 元素。因此，您必须将其应用于.col-6 本身。幸运的是，您的 #home-img 比简单的 .col6 具有 higher specificity，因此它将覆盖另一个选择器。

这可以在下面看到，其中#locate 在手机上排在第一位，#home-image 在台式机上排在第一位（单击Run code snippet 然后Full page 以查看桌面视图）：

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-6">
    home-img
  </div>
  <div class="col-6">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>

请注意，如果您希望元素在移动设备上堆叠，您可以使用 col-md-6 和 col-sm-12 而不是简单的 col-6 类：

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-md-6 col-sm-12">
    home-img
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>

【讨论】：

好吧，“col-6”类只是为了显示它在桌面上的外观，目前 sm、md、lg 和 xl 无关紧要......我看到的问题我有这就是我构建 HTML 的方式，如果我想移动“定位”，我将不得不移动 2 行的整个 div ......我需要的是只移动“定位”行......我在想我将不得不摆脱这些行，只将 3 个 div 作为弹性项目？并尝试以类似于上述结构的方式定位它们？
仅供参考，如果您要添加 20 个引导类，那么引导程序已内置 order classes，还有 1 个

【解决方案2】：

我认为，不可能将列移动（顺序）从一行移动到另一行。在这里，您可以为此尝试一个 Jugaad。您需要在两行中创建两次 id="home-image" 列。然后，您可以根据需要在移动或桌面屏幕中隐藏和显示它。请根据需要尝试以下结构示例。

<div class="row">
  <div id="home-img" class="col d-none d-md-block"> ****** An Image Goes Here ****** </div>
  <div class="col">
    <div class="row">
      <div id="locate" class="col-12"> ****** Locate Content Here****** </div>
      <div id="home-img" class="col-12 d-block d-md-none"> ****** An Image Goes Here ****** </div>
      <div id="order" class="col-12"> ****** Order Content Here****** </div>
    </div>
  </div>
</div>

【讨论】：