Flex order not working on unordered list - html

Question

I'm trying out flex on a blog archive page, listing the last 8 entries per page with a sidebar as one of the flex items - 9 items in total. The sidebar shows first in the normal flex order but i'd like it to show third (as sidebars normally do). Trying any order number on the sidebar item doesn't move it about within the list
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="">Blog Title</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="">Blog Title</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="">Blog Title</h2>
</div>
</div>
</li>
</ul>

Answer 1

you added (.list) class in your css but you forget to add class in your html,
exp. <ul class="list">

Answer 2

You tried it with .list that does not exist in your html(class-"list") so try ul
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
or add class-"list" to ul :
HTML:
<ul class-"list">
CSS:
.list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

Answer 3

You've got:
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>
...so you refer to the ul element by class that you have not applied.
Add class to the ul element and it will work:
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>