根据屏幕大小更改 html 元素的顺序

Question

如何根据屏幕大小更改 html 元素的顺序？

例如，在桌面等大屏幕上，顺序是这样的：

element1 element2 element3

然而，当在 phone 上看到这个时，它不适合屏幕的宽度。所以，我希望它看起来像这样：

element2
element1
element3

由于 Div2 是主要 div，我希望它在大屏幕上位于中间，在智能phone 屏幕上位于顶部。

我正在使用 Foundation 作为网站的框架。

这是一个示例代码：

<div id="container" class="row medium-up-3">
   <div id="element1" class="column column-block">

   </div>
   <div id="element2" class="column column-block">

   </div>
   <div id="element3" class="column column-block">

   </div>     
</div>

我花了很多时间学习 html 和 css 所以这就是我制作网站的全部知识。一直打算学习javascript所以如果解决方案需要的话就好了。

Answer 1

这是 CSS 方式，使用 flexbox（查看 this guide 以帮助您开始使用 flexbox）：

flex-direction 是 row 或 column（取决于您希望元素如何流动）

用 order 更改他们的顺序（在 #element2 上使用 order: 1 将把它放在最后）

#container {
  display: flex;
  flex-direction: column;
}

#element2 {
  order: -1;
}

<div id="container" class="row medium-up-3">
  <div id="element1" class="column column-block">
    #1
  </div>
  <div id="element2" class="column column-block">
    #2
  </div>
  <div id="element3" class="column column-block">
    #3
  </div>
</div>

Answer 2

您只需在容器 ID 上使用 class medium-up-12 而不是 class。祝你好运。

<div id="container" class="row medium-up-12">
  <div id="element1" class="column column-block">
    #1
  </div>
  <div id="element2" class="column column-block">
    #2
  </div>
  <div id="element3" class="column column-block">
    #3
  </div>
</div>

Answer 3

这是您可以做到的一种方法：

在CSS中，您可以使用媒体查询来显示或隐藏内容：

@media (max-width:632px){
    #computer{
        display: none;
    }
    #phone{
        display: block;
    }
}

例如，您可以为两台计算机/智能手机设置 2 x html 部分（如果您希望设备之间的结构等存在较大差异）

关于媒体查询的好读物 - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html

根据屏幕大小更改 html 元素的顺序

Change order of html element depending on screen size

html

javascript

css

zurb-foundation