How to Change the Flex Order When Wrapping

How to change the flex order when wrapping

You can make b element full width with flex: 0 0 100% and change order to order: 2 with media queries DEMO

* {

  box-sizing: border-box;

}

body, html {

  margin: 0;

  padding: 0;

}

.content {

  display: flex;

  flex-wrap: wrap;

}

.b {

  background: lightblue;

}

.a, .b, .c {

  border: 1px solid black;

  flex: 1;

  padding: 10px;

}

@media(max-width: 768px) {

  .b {

    flex: 0 0 100%;

    order: 2;

  }

}

<div class="content">

  <div class="a">A</div>

  <div class="b">B</div>

  <div class="c">C</div>

</div>

Is there a way to change the order of items when wrapping?

Here is an idea using float, yes float. Resize the blue container and see the result:

.box {
  width: 50%;
  border: 4px solid blue;
  margin: 8px;
  text-align: justify;
  font-size:0; /* this will make sure the pseudo element won't have any size */
  overflow: auto;
  resize: horizontal;
}
.box > * {
  font-size:initial; /* we reset the font for child element */
  margin:8px;
  box-sizing:border-box;
}
/* the below is used with text-align:justify to have the correct alignment on wrap */
.box::before {
  content:"";
  display:inline-block;
}
.box::after {
  content:"";
  display:inline-block;
  width:100%;
}
/**/
.a {
  max-width: 100px;
  width: calc(100% - 16px);
  height: 60px;
  float:left; /* we float a */
}

.b {
  width: 70px;
  height: 30px;
  display: inline-block;
}

.c {
  height: 100px;
  width: calc(100% - 16px);
  max-width: 240px;
  float:left; /* and we float c */
  clear:left; /* don't forget this to make "c" always below "a" */
}

<div class="box">
  <div class="a" style="border: 4px solid red;">a</div>
  <div class="c" style="border: 4px solid orange;">c</div>
  <div class="b" style="border: 4px solid green;">b</div>
</div>

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

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.

How to reorder the flex items when resizing the screen?

The first row and second row are different flexboxes - you can wrap item into the container of the second row and using a wrapping flexbox using flex-wrap: wrap. After the first row is filled and if space is not left in the row, the flex items drop to the next row.

Try changing order for the first row below:

.wrapper {

  display: flex; /* flexbox container */

  flex-wrap: wrap; /* wrap the flexbox */

}

.item {

  width: 99%;

  height: 200px;

  background-color: blueviolet;

  display: flex;

}

.item1 {

  background-color: blue;

  width: 33%;

  height: 200px;

}

.item2 {

  background-color: cyan;

  width: 33%;

  height: 200px;

}

.item3 {

  background-color: red;

  width: 33%;

  height: 200px;

}

@media screen and (max-width: 500px) {

  div#item {

    order: 5; /* see changed order below 500px */

  }

  div#item1 {

    order: 3;

  }

  div#item2 {

    order: 4;

  }

  div#item3 {

    order: 1;

  }

}

<div class="wrapper">

  <div class="item" id="item"></div>

  <div class="item1" id="item1"></div>

  <div class="item2" id="item2"></div>

  <div class="item3" id="item3"></div>

</div>

Change order of flex items when flex box width changes

With CSS, as you said, you can use media queries.

In this case you would use:

@media (max-width:500px) {
  .flex-item-3 {
    order: 1;
    margin-left: initial;
  }
}

CODE SNIPPET:

.flex-box {

  display: flex;

  flex-flow: row wrap;

  align-items: center;

  justify-content: center;

  /*---Demo---*/

  margin-top: 40px;

  border: 1px solid #262626;

  /*---Demo---*/

}

.flex-item-0 {

  order: 0;

}

.flex-item-2 {

  order: 2;

}

.flex-item-3 {

  order: 3;

  margin-left: auto;

  /*---Demo---*/

  font-weight: bold;

  background-color: tomato;

  /*---Demo---*/

}

@media (max-width: 500px) {

  .flex-item-3 {

    order: 1;

    margin-left: initial;

  }

}

<div class="flex-box">

  <div class="flex-item-0">0</div>

  <div class="flex-item-0">0</div>

  <div class="flex-item-0">0</div>

  <div class="flex-item-2">2</div>

  <div class="flex-item-2">2</div>

  <div class="flex-item-3">3</div>

</div>

Changing the order of elements and wrap after specific element with flexbox

You can use flexbox order property

* {

  box-sizing: border-box;

}

.container {

  display: flex;

  flex-wrap: wrap;

}

.container div {

  padding: 10px;

  border: 5px solid #fff;

  background: gray;

  text-align: center;

}

.first_container {

  width: 70%;

  order: 1;

}

.second_container {

  width: 100%;

  order: 3;

}

.third_container {

  width: 30%;

  order: 2;

}

<div class="container">

  <div class="first_container">1</div>

  <div class="second_container">2</div>

  <div class="third_container">3</div>

</div>

How to use Order in a Flexbox

Flexbox ordering happens with the flex-direction and flex-wrap properties. Flex-direction specifies the direction of the main axis. It can take the following values:

row (default) main axis: left to right
row-reverse main axis: right to left
column main axis: top to bottom
column-reverse main axis: bottom to top

Flex-wrap defines if flex items are laid out in a single line or wrap to multiple lines. It also controls the direction of the cross axis. It can have three values:

nowrap (default) lays out flex items in a single line; the cross axis
stands in the default position
wrap lays out flex items in multiple lines; the cross axis stands in
the default position
wrap-reverse lays out flex items in multiple lines; the cross axis is
reversed

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

Here is an example of using flexbox's order property:

.flex-container {

  padding: 0;

  margin: 0;

  list-style: none;

  display: flex;

  flex-flow: row wrap;

}

.flex-item:nth-of-type(1) { order: 3; }

.flex-item:nth-of-type(2) { order: 4; }

.flex-item:nth-of-type(3) { order: 1; }

.flex-item:nth-of-type(4) { order: 5; }

.flex-item:nth-of-type(5) { order: 2; }

.flex-item {

  background: tomato;

  padding: 5px;

  width: 100px;

  height: 100px;

  margin: 5px;

  line-height: 100px;

  color: white;

  font-weight: bold;

  font-size: 2em;

  text-align: center;

}

<ul class="flex-container">

  <li class="flex-item">1</li>

  <li class="flex-item">2</li>

  <li class="flex-item">3</li>

  <li class="flex-item">4</li>

  <li class="flex-item">5</li>

</ul>

How to Change the Flex Order When Wrapping