CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
Cakers
Cakers

Reputation: 655

Flexbox reorder items vertically

I have been trying to figure out how to rearrange two items vertically. I remember doing something like this a while ago with flexbox and have looked up ways to do it again, however when I try and implement the flexbox and give the items an order number nothing happens. What I need is for .trail-title to stack below .trail-items.

How do I get them to switch places vertically using flexbox?

Here is a JSFidde I created: https://jsfiddle.net/tb1sv7n8/15/

#flash-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

Upvotes: 1

Views: 512

Answers (3)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

It will be much more simple to change flex-direction value from column to column-reverse than to apply different order values per every flex item. But this would work only on flex items so you should apply this directly to .tg-container. Optimized you CSS:

#flash-breadcrumbs .tg-container {
  display: flex;
  -webkit-flex-flow: column-reverse wrap;
  flex-flow: column-reverse wrap;
}

.trail-items,
.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

Upvotes: 2

Johannes
Johannes

Reputation: 67738

You are using the wrong CSS selector: The flex container has to be #flash-breadcrumbs .tg-container - in your code .tg-container, as the child of #flash-breadcrumbs, is the only flex item...

Then you can add the order settings as desired:

#flash-breadcrumbs .tg-container {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  order: 2;
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

Upvotes: 1

VXp
VXp

Reputation: 12058

You need to apply flex to the .tg-container div since it's the parent of both and change the value of the order property to -1 for the .trail-items div, which will then place it above the .trail-title:

.tg-container {
  display: flex;
  /*flex-wrap: wrap; not necessarry*/
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap; /* this is enough */
  /*flex-direction: column; not necessarry*/
}

.trail-items {
  order: -1; /* modified */
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs, .breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item">
        <span>This here is the trail: The Love of This</span>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions