我想使这个响应时间表有6个步骤

Question

我需要6个步骤。我尝试了几个小时，但我无法完成它的工作。我很确定，对于有经验的人来说并不难。我有几个叉子，但都是死胡同。 你能帮我一下吗？

http://codepen.io/kjohnson/pen/azBvaE

HTML：

<section id="Steps" class="steps-section"> 

<h2 class="steps-header"> 
    Responsive Semantic Timeline 
</h2> 

<div class="steps-timeline"> 

    <div class="steps-one"> 
    <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" /> 
    <h3 class="steps-name"> 
     Semantic 
    </h3> 
    <p class="steps-description"> 
     The timeline is created using negative margins and a top border. 
    </p> 
    </div> 

    <div class="steps-two"> 
    <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" /> 
    <h3 class="steps-name"> 
     Relative 
    </h3> 
    <p class="steps-description"> 
     All elements are positioned realtive to the parent. No absolute positioning. 
    </p> 
    </div> 

    <div class="steps-three"> 
    <img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" /> 
    <h3 class="steps-name"> 
     Contained 
    </h3> 
    <p class="steps-description"> 
     The timeline does not extend past the first and last elements. 
    </p> 
    </div> 

</div><!-- /.steps-timeline --> 

CSS：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 
html { 
    box-sizing: border-box; 
} 

*, *:before, *:after { 
    box-sizing: inherit; 
} 

body { 
    font-family: lato; 
} 

.section-header, .steps-header, .steps-name { 
    color: #3498DB; 
    font-weight: 400; 
    font-size: 1.4em; 
} 

.steps-header { 
    margin-bottom: 20px; 
    text-align: center; 
} 

.steps-timeline { 
    outline: 1px dashed rgba(255, 0, 0, 0); 
} 
@media screen and (max-width: 500px) { 
    .steps-timeline { 
    border-left: 2px solid #3498DB; 
    margin-left: 25px; 
    } 
} 
@media screen and (min-width: 500px) { 
    .steps-timeline { 
    border-top: 2px solid #3498DB; 
    padding-top: 20px; 
    margin-top: 40px; 
    margin-left: 16.65%; 
    margin-right: 16.65%; 
    } 
} 
.steps-timeline:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.steps-one, 
.steps-two, 
.steps-three { 
    outline: 1px dashed rgba(0, 128, 0, 0); 
} 
@media screen and (max-width: 500px) { 
    .steps-one, 
    .steps-two, 
    .steps-three { 
    margin-left: -25px; 
    } 
} 
@media screen and (min-width: 500px) { 
    .steps-one, 
    .steps-two, 
    .steps-three { 
    float: left; 
    width: 33%; 
    margin-top: -50px; 
    } 
} 

@media screen and (max-width: 500px) { 
    .steps-one, 
    .steps-two { 
    padding-bottom: 40px; 
    } 
} 

@media screen and (min-width: 500px) { 
    .steps-one { 
    margin-left: -16.65%; 
    margin-right: 16.65%; 
    } 
} 

@media screen and (max-width: 500px) { 
    .steps-three { 
    margin-bottom: -100%; 
    } 
} 
@media screen and (min-width: 500px) { 
    .steps-three { 
    margin-left: 16.65%; 
    margin-right: -16.65%; 
    } 
} 

.steps-img { 
    display: block; 
    margin: auto; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
} 
@media screen and (max-width: 500px) { 
    .steps-img { 
    float: left; 
    margin-right: 20px; 
    } 
} 

.steps-name, 
.steps-description { 
    margin: 0; 
} 

@media screen and (min-width: 500px) { 
    .steps-name { 
    text-align: center; 
    } 
} 

.steps-description { 
    overflow: hidden; 
} 
@media screen and (min-width: 500px) { 
    .steps-description { 
    text-align: center; 
    } 
} 

Answer 1

我想，你希望这样的事情？

http://codepen.io/adamk22/pen/LGQQKz

$outline-width: 0; 
$break-point: 500px; 

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 
body { 
    font-family: lato; 
} 

$gray-base:  #999999; 
$brand-primary: #3498DB; //Zen Blue 

.section-header { 
    color: $brand-primary; 
    font-weight: 400; 
    font-size: 1.4em; 
} 


.steps-header { 
    @extend .section-header; 
    margin-bottom: 20px; 
    text-align: center; 
} 
.steps-timeline { 
    outline: 1px dashed rgba(red, $outline-width); 

    @media screen and (max-width: $break-point) { 
    border-left: 2px solid $brand-primary; 
    margin-left: 25px; 
    } 

    @media screen and (min-width: $break-point) { 
    border-top: 2px solid $brand-primary; 
    padding-top: 20px; 
    margin-top: 40px; 
    margin-left: 8%; 
    margin-right: 8%; 
    } 

    &:after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 
} 
.steps-one, 
.steps-two, 
.steps-three, 
.steps-four, 
.steps-five, 
.steps-six{ 
    outline: 1px dashed rgba(green, $outline-width); 

    @media screen and (max-width: $break-point) { 
    margin-left: -25px; 
    } 

    @media screen and (min-width: $break-point) { 
    float: left; 
    width: 12%; 
    margin-top: -50px; 
    } 
} 
.steps-one, 
.steps-two, 
.steps-three, 
.steps-four, 
.steps-five, 
.steps-six{ 
    @media screen and (max-width: $break-point) { 
    padding-bottom: 40px; 
    } 
} 
.steps-one { 
    @media screen and (min-width: $break-point) { 
    margin-left: -8%; 
    margin-right: 8%; 
    } 
} 
.steps-two { 
    @media screen and (min-width: $break-point) { 
    margin-right: 8%; 
    } 
} 
.steps-three { 
    @media screen and (min-width: $break-point) { 
    margin-right: 8%; 
    } 
} 

.steps-four { 
    @media screen and (min-width: $break-point) { 
    margin-right: 8%; 
    } 
} 

.steps-five { 
} 

.steps-six { 
    @media screen and (max-width: $break-point) { 
    margin-bottom: -100%; 
    } 
    @media screen and (min-width: $break-point) { 
    margin-left: 8%; 
    margin-right: -8%; 
    } 

} 

.steps-img { 
    display: block; 
    margin: auto; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 

    @media screen and (max-width: $break-point) { 
    float: left; 
    margin-right: 20px; 
    } 
} 

.steps-name, 
.steps-description { 
    margin: 0; 
} 
.steps-name { 
    @extend .section-header; 

    @media screen and (min-width: $break-point) { 
    text-align: center; 
    } 
} 
.steps-description { 
    overflow: hidden; 

    @media screen and (min-width: $break-point) { 
    text-align: center; 
    } 
} 

大多数的更改需要更改CSS，特别是媒体的查询，你可以在笔见。