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

Question

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

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

element1 element2 element3

但是，在手机上看到这个时，它不适合屏幕的宽度。所以，我希望它看起来像这样:

element2
element1
element3

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

我正在使用 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>