Change start number of an ordered list (ol) - html

Question

I would like to know how to start my ol with a different number, say 4. I have tried using start="4" and I have tried adding a class to the ol and setting counter-reset: 4; but none of this seems to work. The number doesn't change.
I have tried to remove all my stylings to put it right back to a plain ol list but it still doesn't work. Can someone please tell me where I am going wrong?
I just want the second list to have the number in the red circle start with 4.
JSFIDDLE
HTML
<div class="row">
<div class="col-md-6">
<ol class="number-circles">
<li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 3</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
<div class="col-md-6">
<ol class="number-circles four">
<li><div class="ol-block"><div class="blue-heading">Title 4</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
<li><div class="ol-block"><div class="blue-heading">Title 5</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
</li>
</ol>
</div>
</div>
CSS
.col-md-6 {
float: left;
width: 50%;
}
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
.blue-heading {
color: red;
font-weight: 600;
margin-bottom: 5px;
}
li {
counter-increment: step-counter;
margin-bottom: 40px;
}
.number-circles li::before {
content: counter(step-counter);
margin-right: 15px;
font-size: 17px;
background-color: red;
border: solid 6px yellow;
color: white;
font-weight: bold;
border-radius: 50%;
height: 40px;
display: inline-block;
width: 40px;
height: 40px;
padding: 2px 8px;
text-align: center;
float: left;
}
.ol-block {
float: left;
display: inline-block;
width: 85%;
margin-bottom: 20px;
}
ol.four { counter-reset: item 2; }

Answer 1

You have list-style-type set to none on your ol.
.number-circles {
margin: 40px 0 0 0;
padding: 0;
list-style-type: none;
}
The start attribute won't make a difference, because the value will be hidden.
list-style-type
The list-style-type property specifies the appearance of a list item
element.
none
No item marker is shown.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Answer 2

You don't have a counter named "item". You need to change:
ol.four {counter-reset: item 2}
to:
ol.four {counter-reset: step-counter 3}
The value of step-counter is 0 based so setting value to 3 will display 4
Check it out here - JSFiddle