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

Question

我想知道解决我遇到的一个非常具体的问题。我有一个网页设计，基本上显示如下：

<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 =“order”低于id="locate"时，我正试图想办法将id="home-img"移动到id="home-image"上方。

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

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

桌面视图。

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

移动视图

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

Answer 1

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

问题是#locate位于.row内部的.col-6内部，而order仅适用于兄弟元素。因此，您必须将它应用于.col-6本身。幸运的是，你的#home-img有higher specificity比简单的.col6，所以它会覆盖其他选择器。

这可以在下面看到，其中#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>

Answer 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>