How to use Order in a Flexbox

Question

I have this section that is flexbox with a flex-direction: column, and i want to put the title as the first element only in the mobile view.

But i don't know how to use the order property to make this work.

Desktop Mobile

<section class="section section--team">
      <img
        class="section--team__image"
        src="./imagens/requite.jpeg"
        alt="Time da Instalura" />

      <div class="section--team__content">
        <h1 class="section--team__title">Nossa Equipe</h1>
        <p class="section__text section--team__text">
          O instalura foi criado por uma equipe compentente utilizando que há de
          mais moderno na tecnologia, mas sempre primando pela experiência do
          usuário.
        </p>

        <p class="section__text section--team__text">
          Venha conhecer nossa equipe. Quem sabe até trabalhar conosco!
        </p>

        <ul class="section--team__links">
          <li><i class="fas fa-users"></i> <a> Conheça nossa equipe </a></li>
          <li>
            <i class="fas fa-project-diagram"></i> <a> Trabalhe com a gente </a>
          </li>
        </ul>
      </div>
</section>

My Stylesheet of the Section and the elements. Now, i think it will be more clear to help me

 &--team {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: $ocean-blue;

    @media (min-width: 320px) and (max-width: 480px) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    &__content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      height: 100%;
    }

    &__title,
    &__links li {
      a {
        color: $white;
        margin-left: 2px;
      }

      .fa-users,
      .fa-project-diagram {
        color: $blue-lighten;
      }
    }

    &__text,
    &__links {
      margin-left: 2rem;

      @media (min-width: 320px) and (max-width: 480px) {
        margin-left: 0rem;
      }
    }

    &__title {
      color: $white;
      font-size: $font-xl;
      align-self: center;
      margin-bottom: $margin-sm;
    }

    &__text {
      margin-bottom: $margin-xs;
    }

    &__links {
      margin-top: $margin-xs;

      li {
        margin-top: $margin-xs;
      }
    }

    &__image {
      height: 10rem;
      margin-bottom: 3rem;
      border-radius: 3px;
    }
  }

If you could share your CSS code of this section it would be helpful, and more easily for community members to help you on this topic. — SMAKSS, Oct 20 '19 at 21:49

Ömürcan Cengiz · Accepted Answer · 2019-10-21T19:13:56.087

Flexbox ordering happens with the flex-direction and flex-wrap properties. Flex-direction specifies the direction of the main axis. It can take the following values:

row (default) main axis: left to right
row-reverse main axis: right to left
column main axis: top to bottom
column-reverse main axis: bottom to top

Flex-wrap defines if flex items are laid out in a single line or wrap to multiple lines. It also controls the direction of the cross axis. It can have three values:

nowrap (default) lays out flex items in a single line; the cross axis stands in the default position
wrap lays out flex items in multiple lines; the cross axis stands in the default position
wrap-reverse lays out flex items in multiple lines; the cross axis is reversed

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

Here is an example of using flexbox's order property:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }
.flex-item:nth-of-type(4) { order: 5; }
.flex-item:nth-of-type(5) { order: 2; }

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

FYI the flex-flow property is a shorthand property for flex-direction and flex-wrap.

You can check out this MDN web doc for diving deeper.

Hope it helps :)

score 1 · Answer 2 · answered Oct 21 '19 at 06:37

You can use this code in Flexbox

body {
  margin: 0;
}


/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
}

div.orange {
  background-color: orange;
}

div.blue {
  order: -1;
  background-color: aqua;
}

div.green {
  background-color: lightgreen;
}

.container>div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


/***************************/

@media screen and (min-width:800px) {
  .container {
    flex-wrap: wrap;
  }
  div.orange {
    flex-basis: 100%;
    width: 33%;
  }
  div.blue {
    flex-basis: 100%;
    width: 33%;
    order: 0;
  }
  div.green {
    flex-basis: 100%;
    width: 33%;
  }
}

<div class="container">
  <div class="orange">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
</div>

How to use Order in a Flexbox

2 Answers2