代码之家 › 专栏 › 技术社区 › IvanS95

根据设备屏幕改变元件位置?

bootstrap-4 flexbox html5 css

IvanS95 · 技术社区 · 7 年前

我想想出一个办法来解决一个非常具体的问题。我的网页设计基本上是这样的:

<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" 高于 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         |
------------------------

2 回复 | 直到 6 年前

Obsidian Age 7 年前

你可以利用 order 的内部属性 media query .

问题是 #locate 在一个 .row A的内部 .col-6 和 秩序 仅适用于 兄弟姐妹 元素。因此,您必须将其应用于 COL-6 本身。幸运的是, #home-img 有 higher specificity 比简单的 .col6 ,因此它将重写另一个选择器。

这可以在下面看到,其中 #定位 手机第一,而且 #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 班级:

@媒体屏幕和(最大宽度:768px){
.第6列{
顺序:1;
}

#主页img{
顺序: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>

HDP 7 年前

我认为,无法将列从一行移动到另一行。在这里,你可以尝尝一罐。您需要创建两次 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>