$1.58

How to display flex by CSS order?

Ask a question+
0

I used the CSS order to get the primary box moving to the top row higher the other 2 boxes but it doesn’t work.

.container {
 display:flex;
 flex-flow:row;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
}
<div class="container">
<div class="item"> Box 1 </div>
<div class="border"></div>
<div class="item"> Box 2 with medium width</div>
<div class="border"></div>
<div class="item primary"> Box 3 with larger width content</div>
</div>
Dave 10
add comment

2 Answers

0

Please use the below CSS code

* {
  box-sizing:border-box;
}
.container {
  display:flex;
  flex-flow:row;
  flex-wrap:wrap;
}
.item {
  border:1px solid red;
  padding:5px;
  width:calc(50% - 2px);
}
.item.primary {
  width:100%;
}
.border {
  border:1px solid blue;
}
.primary {
  order:-1;
}
Gopal Bajpai 210
add comment
0

You should use flex-basis:100% to make primary item 100%, so use flex-wrap:wrap to make multirow layout through the flex. Source: https://www.w3docs.com/learn-css/flex-wrap.html

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
}
<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> Box 3 with larger width content</div>
</div>
Henry 0
add comment

Your Answer