CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Chris
Chris

Reputation: 368

Can you specify the order of wrapped elements in CSS flex?

I have a <div> that uses CSS flex to keep it responsive.

I am looking for a way to specify the order that elements are wrapped in.

For example, I need

1 - 2 - 3

To become

1
3
2

When fully wrapped.

Current code: https://jsfiddle.net/g0L44e5b/

Is this possible?

Upvotes: 3

Views: 2060

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105883

yes you can , use order property:

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>

here is an handy ressource https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edit after your edit

wrap and mediaquerie can be used :

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>

Upvotes: 3

Trev14
Trev14

Reputation: 4116

Check this pen out:

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

What the pen does -- First gives each element a default class with an order attribute:

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

Then it gives a class to each each flexbox a specific ordering attribute:

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

Apply the sorting classes to your case and you should be good to go.

Upvotes: 1

Johannes
Johannes

Reputation: 67758

if you use media queries, you can use flex-direction: column on the parent element and order: 1; , order: 2; etc. on the child elements to put them in any order you need.

Upvotes: 0

Related Questions