根據屏幕尺寸更改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>