根据屏幕尺寸更改html元素的顺序

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

这是使用flexbox的CSS方式（请参阅本指南，以帮助您开始使用flexbox）：

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

更改订单order （使用order: 1 ＃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

您只需要简单地使用medium-up-12类而不是容器ID上的类。 祝你好运。

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