Flex_Example_Order

by Julien Roche

HTML

<main class="flex">
  <section class="flex_child">Element 1</section>
  <section class="flex_child">Element 2</section>
  <section class="flex_child">Element 3</section>
  <section class="flex_child">Element 4</section>
</main>

CSS

.flex {
  background-color: white;
  display: flex;
  flex-wrap: no-wrap;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
}

.flex_child {
  flex: 1 0 auto;
  border: 1px solid black;
  font-weight: bolder;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.flex_child:first-child {
  order: 1;
}

.flex_child:last-child {
  order: -1;
}