Question

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

＆＃13;

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

＆＃13;

我使用Bootstrap 4来构建网站，上面的课程只是为了展示我在脑海中如何构建设计，对结构的任何更改都是受欢迎的，因此它可以做我需要的。

因此，当我在手机或平板电脑上查看该网站时，我正试图想办法将id="locate"移动到id="home-img"以上的div，但保持id = ＆＃34;为了＆＃34;低于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查看桌面视图）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: