changing order of flex boxes.

Nothing fancy here. When you click a box, it is moved to the front of the stack. Most recently clicked boxes at the front - so as you click other boxes, they will move back in the order they were clicked.

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>changing order of flex boxes.</title>
  <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">


  <div class="wrap">
  <script src=''></script>

    <script  src="js/index.js"></script>

/* Downloaded from */
.wrap {
  height: 100px;
  background: gray;
  display: flex;
  justify-content: space-between;

.wrap div {
  width: 100%;
  order: 1000;
  opacity: 0.3;
  transition: opacity 0.15s ease-in;

.wrap div.first {
  opacity: 1;

.wrap div:hover {
  opacity: 0.8;

.wrap div:nth-of-type(1) {
  background: red;

.wrap div:nth-of-type(2) {
  background: green;

.wrap div:nth-of-type(3) {
  background: yellow;

.wrap div:nth-of-type(4) {
  background: blue;

.wrap div:nth-of-type(5) {
  background: orange;
/* Downloaded from */
// Set a "first" tab
$(document).ready(function() {
  $('.wrap div:first-of-type').addClass('first').css('order', 1);

// On clicking another tab:
// 1. All inactive tabs with class "incrementer" get pushed down
// 2. The previously active tab gets "first" class removed and has its order incremented, and gets class "incrementer" so that it continues to get incremented later
// 3. Current tab gets "incrementer" class removed, "first" class added, and is moved to the front of the stack.
$('.wrap div').click(function() {
  $('.incrementer').css('order', '+=1');
  $('.first').css('order', '+=1').removeClass('first').addClass('incrementer');
  $(this).removeClass('incrementer').addClass('first').css('order', 1);

This awesome code ( changing order of flex boxes. ) is write by Aaron James Young, you can se more from this user in the personal repository

You can find the original code on

2018 © Aaron James Young