Flex order property not working as expected

Question

I'm trying to get "Mac and cheese is really yum!" underneath "The main content of the site".

#content { padding: 0; background: 0; float: none; width: auto; } .heading { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; } #content h1 { text-align: left; width: 100%; float: none; margin: 0 0 10px; font: 2.538em/1.3em; color: #393939; } #content .text { order: 1; }

<div id="content"> <div class="heading"> <h1>Mac and Cheese</h1> <div class="text"> <p>Mac and cheese is really yum!</p> </div> </div> <div class="main-content"> The main content of the site</div> </div>

http://codepen.io/anon/pen/KMPydJ

Any help is appreciated -- thanks!

@T.J.Crowder - Jens Meiert's index of properties is a great reference for those kind of searches. — Alohci
– Alohci, Commented May 26, 2016 at 0:42

Community · Accepted Answer · 2017-05-23 12:07:56Z

The CSS order property applies only to siblings.

In your code, you are trying to re-position .text, which is a child of a flex item (.heading), to appear after .main-content.

Well, .heading and .main-content are siblings. But .text is like a niece to .main-content, so the order property won't work.

Once .text an .main-content are siblings you can achieve the ordering you want.

In the revised code below, I've removed your .heading element. Now the h1, .text and .main-content are all siblings.

#content { display: flex; flex-direction: column; } h1 { margin: 0 0 10px; font: 2.538em/1.3em; color: #393939; } .text { order: 1; }

<div id="content"> <h1>Mac and Cheese</h1> <div class="text"> <p>Mac and cheese is really yum!</p> </div> <div class="main-content">The main content of the site</div> </div>

Learn more about the order property here: https://stackoverflow.com/a/36118012/3597276

Collectives™ on Stack Overflow

Flex order property not working as expected

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related