CODEWITHSUNDEEP
htmlcssflexbox
Stephan Olsen
Stephan Olsen

Reputation: 1815

Flexbox order when in different divs?

I'm trying to change the order of some items using flexbox. I've got a problem however because one of the items I want to change the order of is in a new div, so it isn't a direct child of the same parent that the other items are.

<div class="wrapper">
  <div class="something">
    <img src=""></img>
    <p>PARAGRAHP</p>
  </div>
  <h1>TITLE</h1>
  <h4>SUBTITLE</h4>
</div>

I'm trying to move the paragraph below the title and subtitle, I made a codepen here http://codepen.io/anon/pen/BjYmZX

Is there a way to achieve this?

Upvotes: 2

Views: 1616

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

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>

Revised Codepen

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105893

for this kind of reordering, display table properties should help :

img {
  height: 300px;
}

.wrapper {
  text-align: center;
  display: table;
  margin: auto;
}

.something {
  display: table-row;
}

p {
  display: table-footer-group;
}

h1 {
  display: table-caption
}

h4 {
  display: table-header-group;
}

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

but maybe, it would be wised to set things in html into the correct order :)

Upvotes: 1

Related Questions