Подскажите как сверстать эту секцию

#html #css #css3 #bootstrap

Используя flexbox  я смогу их так установить, но что делать с линиями? 
Или же сделать что-то на подобии адаптивной галереи, а как тогда адаптивить, что
с линиями делать? 

Как верстать такую секцию? Подскажите. Может быть примеры есть какие.
    

Ответы

Ответ 1

Как вариант



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b {
  max-width: 960px;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  counter-reset: b-item;
}
.b-item {
  max-width: 220px;
  margin: 0 auto;
  padding: 25px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.b-item:nth-of-type(even) {
  padding-top: 50px;
}
.b-item:nth-of-type(even) p {
  order: 1;
}
.b-item:before,
.b-item:after {
  border: 1px solid #ccc;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  display: block;
  margin: 10px auto;
  position: relative;
  z-index: 99;
  background: #fff;
}
.b-item:nth-of-type(odd):after,
.b-item:nth-of-type(even):before {
  counter-increment: b-item;
  content: counter(b-item)" ";
}
.b-item .fa {
  font-size: 26px;
  color: #c00;
}
.b-item .fa:after {
  content: '';
  border-bottom: 1px dashed #555;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
}
.b-item .fa:nth-of-type(1):after {
  left: 50%;
}
.b-item:nth-of-type(odd) .fa:after {
  transform: rotate(-16deg);
}
.b-item:nth-of-type(even) .fa:after {
  transform: rotate(16deg);
}
.b-item:last-of-type .fa:after {
  border: none;
}
@media screen and (max-width: 767px) {
  .b {
    flex-wrap: wrap;
  }
  .b-item:nth-of-type(even) {
    padding-top: 25px;
  }
  .b-item .fa:after {
    display: none;
  }
  .b-item:nth-of-type(odd):after {
    display: none;
  }
  .b-item:before {
    counter-increment: b-item;
    content: counter(b-item)" ";
  }
}


  

    
    
text text text text text text
  
  

    
    
text text text text text text
  
  

    
    
text text text text text text
  
  

    
    
text text text text text text
  
  

    
    
text text text text text text
  
  

    
    
text text text text text text