Можете ли вы указать порядок обернутых элементов в CSS flex?

Question

У меня есть <div>, который использует CSS flex, чтобы поддерживать его отзывчивость.

Я ищу способ, чтобы задать порядок, в котором элементы завернутые в.

Например, мне нужно

1 - 2 - 3

Чтобы стать

1 
3 
2 

Когда полностью обернут ,

Текущий код: https://jsfiddle.net/g0L44e5b/

Возможно ли это?

Answer 1

Проверить это перо из:

http://codepen.io/chriscoyier/pen/YPzyYa

Что ручка делает - Первый дает каждому элементу класса по умолчанию с атрибутом порядка:

.icon { 
    order: 0 !important; 
} 
.username { 
    order: 1 !important; 
    width: 100%; 
    margin: 15px; 
} 
.search { 
    order: 2 !important; 
    width: 100%; 
} 

Затем он дает класс для каждый из которых имеет конкретный атрибут заказа:

.bar-2 { 
    .username { 
    order: 2; 
    } 
} 
.icon-3 { 
    order: 3; 
} 

Примените классы сортировки к вашему делу, и вам должно быть хорошо идти.

Answer 2

при использовании медиа-запросы, вы можете использовать flex-direction: column на родительский элемент и order: 1;, order: 2; и т.д. на дочерние элементы, чтобы поместить их в любом порядке, вам нужно.

Answer 3

да, вы можете использовать order свойство:

body { 
 
    display:flex; 
 
    flex-flow:column; 
 
    } 
 
p:last-child{ 
 
    order:1; 
 
    } 
 
p:nth-child(2) { 
 
    order:2; 
 
    }

<p>1</p> 
 
<p>2</p> 
 
<p>3</p>

здесь является удобная Ressource https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

редактировать после редактирования

обертывание и mediaquerie могут быть использованы:

body { 
 
    display:flex;flex-wrap:wrap; 
 
    } 
 
p { 
 
    flex:1; 
 
    min-width:380px; 
 
    margin:10px; 
 
    border:solid; 
 
} 
 
@media screen and (max-width : 800px) { 
 
p:last-child{ 
 
    order:1; 
 
    } 
 
p:nth-child(2) { 
 
    order:2; 
 
    } 
 
}

<p>1</p> 
 
<p>2</p> 
 
<p>3</p>