Flexbox - front-line Wrap center element

Question

I use Flex Box to create a traditional list of floating point elements. I have three elements structured as:

<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 threeit will always be the first child to be pressed on a new line if the screen width falls below a threshold value.

Do I need to customize Flex Box anyway to item twoalways be the first?

Jsfiddle

Answer 1

In a media query, you can control the behavior and order of flexible elements:

modified violin

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>

Run code

From the specification:

5.4. Display Order: Propertyorder

Flex , . order.

order , flex, . <integer>, , .

order flex 0.

Answer 2

<section>
<div>
    item one
</div>
<div>
    item two
</div>
<div>
    item three
</div>
</section>
 section{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse; 
 }
 div{
     width: 33%;
    min-width: 200px;
     border: 1px solid black;

@media (max-width: 600px) {exmple one 2 exmple 3 4 exmple 5 exmple 6