Edit in JSFiddle

<section class="steps">
    <nav><ul>
        <li><span>Wprowadzenie</span></li>
        <li class="active"><span>Krok 1</span></li>
        <li><span>Krok 2</span></li>
        <li><span>Krok 3</span></li>
        <li><span>Krok 4</span></li>
        <li><span>Zakończenie</span></li>
    </ul></nav>
</section>

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
body {background: #F6F6F6}


/*
 * Step list
 */
.steps {position: absolute; top: 50%; left: 0; overflow: hidden; width: 100%; margin-top: -55px; padding: 30px 20px}
.steps ul {overflow: hidden; padding: 0; font-size: 1px; list-style: none; white-space: nowrap; counter-reset: step-list}
.steps ul>li {position: relative; overflow: hidden; display: inline-block; width: 16.667%; margin-right: -1px; padding: 32px 20px 0; color: #666; font-weight: 700; font-size: 13px; text-align: center; vertical-align: middle; counter-increment: step-list}
.steps ul>li:before {content: ''; position: absolute; top: 8px; right: 50%; left: 0; height: 4px; background: #F28022}
.steps ul>li:after {content: ''; position: absolute; top: 8px; right: 0; left: 50%; height: 4px; background: #F28022}
.steps ul>li:first-child:before {display: none}
.steps ul>li:last-child:after {display: none}
.steps ul>li>span {position: relative; z-index: 1; display: block}
.steps ul>li>span:before {content: ''; position: absolute; top: -24px; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #FAFAFA; border-radius: 50%; background: #F28022; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2)}
.steps ul>li>span:after {content: counter(step-list); position: absolute; top: -24px; left: 50%; width: 20px; margin: -10px 0 0 -10px; padding-left: 2px; color: #fff; font: 400 11px/24px Arial, sans-serif; text-align: center}
.steps ul>li.active~li {font-weight: 400}
.steps ul>li.active:after,
.steps ul>li.active~li:before,
.steps ul>li.active~li:after,
.steps ul>li.active~li>span:before {background: #D7D7D7}
.steps ul>li.active~li>span:before {box-shadow: none}

@media screen and (max-width: 959px) {
    .steps ul>li {display: none; width: 33.333% !important}
    .steps ul>li.active,
    .steps ul>li.active+li,
    .steps ul>li.active+li+li {display: inline-block}
}
@media screen and (max-width: 567px) {
    .steps ul>li {width: 50% !important}
    .steps ul>li.active+li+li {display: none}
}