Flexbox - Wrap Center Item on New Line First

Question

I am using Flex Box to create a traditional float items list. I have three items structured like:

<section>
    <div>
        item one
    </div>
    <div>
        item two
    </div>
    <div>
        item three
    </div>
</section>

with CSS:

section{
    display: flex;
    flex-wrap: wrap;
}
div{
    width: 33%;
    min-width: 200px;
    border: 1px solid black;
}

In this current format, item three will always be the first child pushed to a new line if the width of the screen drops below a threshold.

Is there anyway to configure Flex Box so that item two is always the first to drop?

JSFiddle

Answer 1

You can control the wrapping behavior and order of flex items in a media query:

revised fiddle

section {
  display: flex;
}
div {
  width: 33%;
  min-width: 200px;
  border: 1px solid black;
}
@media (max-width: 600px) {
  section { flex-wrap: wrap; }
  div:nth-child(2) { order: 1; }
}

<section>
  <div>item one</div>
  <div>item two</div>
  <div>item three</div>
</section>

From the spec:

5.4. Display Order: the order property

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

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

The initial order value for all flex items is 0.