<div id="orderScene">
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="flex-item">4</div>
          <div class="flex-item">5</div>
        </div>

<div class="order">None</div>

#orderScene{
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          flex-flow: row wrap;

          .flex-item {
            background: #69489d;
            color: white;
            padding: 20px 30px;
            margin: 5px;
            font-size: 2em;
          }
          .flex-item:nth-of-type(1) {
            order: 1;
          }
          .flex-item:nth-of-type(2) {
            order: 2;
          }
          .flex-item:nth-of-type(3) {
            order: 3;
          }
          .flex-item:nth-of-type(4) {
            order: 4;
          }
          .flex-item:nth-of-type(5) {
            order: 5;
          }

        }

const orderScene = document.querySelector('#orderScene')
const orderInfo = document.querySelector('.order')

orderScene.addEventListener('click', e => {
  let style = getComputedStyle(e.target)
  orderInfo.textContent = style.order
})