Untitled

<ul class="container">

  <li class="first">I am first in source</li>

  <li>I am last in source</li>

</ul>

.first {

  background: yellow;

}

@media (max-width: 30em) {

  .container {

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: start;

    -moz-box-align: start;

    -ms-flex-align: start;

    -webkit-align-items: flex-start;

    align-items: flex-start;

  }

  .container .first {

    -webkit-box-ordinal-group: 2;

    -moz-box-ordinal-group: 2;

    -ms-flex-order: 1;

    -webkit-order: 1;

    order: 1;

  }

}