Как изменить порядок двух разделов, когда на мобильном?

Question

Я пытаюсь изменить порядок двух divs в контейнере, когда они добираются до размера мобильного телефона.

<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div> 

Возможно ли это изменить его так, что он изменится на

<div class="container"> 
    <div class="div2"></div> 
    <div class="div1"></div> 
</div> 

Answer 1

Вы можете использовать чистый CSS, чтобы сделать это

.container{ 
    display:table; 
} 
.div1{ 
    display:table-footer-group; 
} 
.div2{ 
    display:table-header-group; 
} 

убедитесь, что вы положили его в @media запрос.

Answer 2

Вы можете использовать два отдельных класса и сделать только один видимый за раз в зависимости от ширины носителя.

Сначала создайте CSS вы

//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view 
@media screen and (min-width: 1025px) { 
    .desktop-container { 
    Display:none; 
    } 
} 


// This container is only visible on smaller devices with screen size 360px - 1024px 
@media screen and (min-width:360px) and (max-width:1024px) { 
    .mobile-container { 
    Display:none; 
    } 
} 

Теперь создайте разметку ...

<div class="desktop-container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div> 

<div class="mobile-container"> 
    <div class="div2"></div> 
    <div class="div1"></div> 
</div> 

Answer 3

В зависимости от which browsers вам нужно поддерживать, вы можете использовать Flexbox для переключения порядка дивы.

.container { 
    display: flex; 
} 
.div1 { 
    order: 0; 
} 
@media screen and (min-width: 780px) { 
    .div1 { 
    order: 1; 
    } 
} 

JS Fiddle

Answer 4

Вы можете сделать это с помощью Flexbox путем изменения порядка.

.container { 
    display: flex; /* or inline-flex */ 
    flex-direction: column; 
} 
@media(min-width:768px){ 
    .container { 
    flex-direction: column-reverse; 
    } 
} 

http://codepen.io/partypete25/pen/oxJNqz