Section Using flexbox I can install them this way, but what to do with the lines? Or do something like an adaptive gallery , and then how to adapt, what to do with the lines?

How to make up such a section? Tell me. Maybe there are some examples.

1 answer 1

As an option

* { 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)" "; } } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="b"> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> <div class="b-item"> <i class="fa fa-diamond" aria-hidden="true"></i> <p>text text text text text text</p> </div> </div>