Flex box item position custom ordering

Question

I have flex boxes 11111 22222 and 33333 that wrap.

They wrap like this:

         3333333
222222222222 
11111

but I need them to wrap like this

11111  33333333
222222222222

Below is the code so far, and here is a link to the codepen: https://codepen.io/anon/pen/oRrzzQ

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
  margin-right: auto;
}
.green {
  background: yellowgreen;
  margin-right: auto;
}
.blue {
  background: steelblue;
  margin-left: auto;
}


.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

<div class="content2">
    <div class="red">1</div>
  <div class="green" style="width:60%">2</div>
  <div class="blue">3</div>
</div>

Flexbox works on 1 axis, try CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/ — BugsArePeopleToo, Jun 06 '19 at 20:37
possible duplicate - https://stackoverflow.com/questions/37489270/how-to-change-the-flex-order-when-wrapping — Naga Sai A, Jun 06 '19 at 20:45

score 0 · Answer 1 · answered Jun 06 '19 at 20:39

You can easily achieve this by display: grid but for your asking purpose in flex I added some changes in your code

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
  display: flex;
flex-direction: column;
  flex-wrap: wrap;
}

.content2 div {
    height: 50%;
  width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap -->


<div class="content2">
    <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

score 0 · Answer 2 · answered Jun 06 '19 at 20:54

Adjusted using your code.

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.content2 div {
  height: 50%;
}

.red {
  width: 40%;
  background: orangered;
  margin-right: auto;
}
.green {
  width: 60%;
  background: yellowgreen;
  margin-right: auto;
}

.blue {
  width: 100%;
  background: steelblue;
  margin-left: auto;
}


.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between ;
}

score 0 · Answer 3 · answered Nov 07 '22 at 20:43

0

The best solution would be to use CSS "order" combined with "container queries" - but container queries are not well supported yet.

answered Nov 07 '22 at 20:43

RashaMatt

247
1
3
11

Flex box item position custom ordering

3 Answers3