How to Reorder Divs Using Flex Box

How to reorder CSS Flexbox

Just add this

  .item:nth-child(2n - 1) {
    order: -1;
  }

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

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }

  .item:nth-child(2n - 1) {
    order: -1;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

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>

Responsive flexbox and reordering subchildren

You might use multi-column layout for desktop.

And switch to flex (which allows to reorder elements) on mobile using media query.

Run the example below in the Full page mode and try to resize the window:

(I added some text to the blocks to make them more real-world)

* {  box-sizing: border-box;}
body {  background-color: #444;  color: white;  font-family: sans-serif;  max-width: 1280px;  width: 100%}
.normal {  padding: 10px;  border: solid 1px #ccc;  margin: 20px;  columns: 2 200px;  column-fill: balance;}
.normal>div {  margin: 0 0 10px;  padding: 10px;  background-color: #333;  page-break-inside: avoid;}
@media (max-width:480px) {  .normal {    display: flex;    flex-direction: column  }  .normal>div:nth-child(1) {    order: 1  }  .normal>div:nth-child(2) {    order: 3  }  .normal>div:nth-child(3) {    order: 2  }  .normal>div:nth-child(4) {    order: 4  }}

Desktop<div class="normal">  <div>A<br>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</div>  <div>C<br>The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful    when the focus is meant to be on design, not content.</div>  <div>B<br>It usually begins with:<br>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”</div>  <div>D<br> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</div></div>

CSS FlexBox | Reordering Elements in Mobile

You can consider display:contents (https://caniuse.com/#feat=css-display-contents) on the .box element then you will be able to use order on the inner elements:

.box {  color: white;  font-size: 80px;  text-align: center;  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);  padding: 10px;  width: 100vw;}body { margin:0;}.container {  display: flex;  height: 100vh;  background:blue;}
.a,.b,.c,.d {  height: 50%;  border:2px solid;}
@media all and (max-width: 500px) {  .container {    flex-direction: column;  }  .box {    display:contents;  }  .b {    order:2;  }}

<div class="container">  <div class="box box1">    <div class="a">a</div>    <div class="b">b</div>  </div>  <div class="box box2">    <div class="c">c</div>    <div class="d">d</div>  </div></div>

Ordering of elements in flexbox

I think the easiest way is to use justify-content for the correct alignment. I've added a few comments in the code.

.container {  border: 2px solid red;  display: flex;  width: 100%;}
.title-container {  border: 1px solid green;  flex: 1;}
.action-container {  border: 1px solid blue;  flex: 1;  display: flex;  flex-direction: row; /* Changed */  justify-content: flex-end; /* Added */}/*  Add margin to each button except for the first one*/button:not(:first-child) {  margin-left: 5px;}

<div class="container">  <div class="title-container">    <h3>      Heading Title    </h3>  </div>  <div class="action-container">    <button>Button 1</button>    <button>Button 2</button>    <button>Button 3</button>    <button>Button 4</button>  </div></div>

Flexbox order when in different divs?

The order property controls the re-ordering of flex items in the same container.

In your mark-up, .something is a flex item, along with siblings h1 and h4. The children of .something are in a different container and, hence, cannot be re-ordered with the parent and uncles.

If it's not absolutely necessary to have your image and paragraph in a different container, just put them in the main container. Then you can order everything however you like.

Here's an example:

.wrapper {  text-align:center;  display:flex;  flex-direction: column;}
img {  height: 300px;  align-self: center;}
p {  order:3;}
h1 {  order:1;}
h4 {  order:2;}

<div class="wrapper">  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Puffer_Fish_DSC01257.JPG/1280px-Puffer_Fish_DSC01257.JPG"></img>  <p>ICONS HERE</p>  <h1>TITLE</h1>  <h4>SUBTITLE</h4></div>

---

Related Topics