Question

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

例如，在像台式机这样的大屏幕上，订单会是这样的：

element1 element2 element3

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

在element2
  部件1
  元素3

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

Answer 2

这是你可以做到的一种方式：

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

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

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

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

Answer 3

您只需在容器ID上使用class medium-up-12而不是class。 Goo Luck。

＆＃13;

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

＆＃13;

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

3 个答案: