Изменить порядок элемента html в зависимости от размера экрана

Question

Как изменить порядок элементов html в зависимости от размера экрана?

Например, на большом экране, как настольные компьютеры, заказ будет выглядеть так:

element1 element2 element3

Однако, когда видим это по телефону, он бы не соответствовать ширине экрана. Итак, я хотел бы, чтобы выглядеть следующим образом:

element2
element1
element3

Поскольку Div2 является основным ДИВ, я хотел бы, чтобы это было на середине на больших экранах и сверху на экранах смартфонов.

Я использую 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 (с использованием order: 1 на # element2 поставит его в конце)

#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

Вы просто используете класс medium-up-12 вместо класса на идентификаторе контейнера. Goo Luck.

<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