Заказ Flex не работает в неупорядоченном списке

Question

Я пробую использовать flex на странице архива блога, перечисляя последние 8 записей на странице с боковой панелью в качестве одного из элементов flex - всего 9 элементов. Боковая панель сначала отображается в обычном порядке, но мне бы хотелось, чтобы она была третьей (как обычно делают боковые панели). Попытка любого order числа на элементе боковой панели не перемещает его в списке

https://jsfiddle.net/oliver_p/2v3duxy4/2/

html * {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  display: flex;
  padding-right: 20px;
  width: 33.33333%;
  padding-bottom: 20px;
}

.list-item:first-child {
  order: 2;
}

.list-content-blog {
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list-content-blog .list-content-holder {
  flex: 1 0 auto;
  padding: 30px;
}

<ul>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 5 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 10 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 15 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
</ul>

Answer 1

У вас есть:

html * {
    box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  display: flex;
  padding-right: 20px;
  width: 33.33333%;    
  padding-bottom: 20px;
}

.list-item:first-child {
  order: 2;
}

<ul>
	<li class="list-item">
	    	1
	</li>
	<li class="list-item">
	    	2
	</li>
	<li class="list-item">
	    	3
	</li>
</ul>

... поэтому вы ссылаетесь на элемент ul по классу, который вы не применили.

Добавьте класс к элементу ul, и он будет работать:

html * {
    box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  display: flex;
  padding-right: 20px;
  width: 33.33333%;    
  padding-bottom: 20px;
}

.list-item:first-child {
  order: 2;
}

<ul class="list">
<li class="list-item">
	1
</li>
<li class="list-item">
	2
</li>
<li class="list-item">
	3
</li>
</ul>

Answer 2

вы добавили (.list) класс в ваш css, но вы забыли добавить класс в html,

exp.<ul class="list">

Answer 3

Вы пробовали это с .list, которого нет в вашем html (class-"list"), поэтому попробуйте ul

 ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

или добавьте class-"list" к ul:
HTML:

<ul class-"list">

CSS:

   .list{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }