如何在响应式网站中创建一条连接两个图像的行？

Question

Anyone knows how this can be acomplished?

The website is using bootstrap 4 and the lines must be able to disapear in extra small screens.

Answer 1

This should help....

http://codepen.io/pranesh-r/pen/xEOAOm

Replace the div.circle with your image..

Answer 2

If the final result will be like your sketch, you can try to think these lines as borders of simple div, and the CSS will be something like

.div-top{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-bottom: 1px solid black; /*for example*/
  border-left: 1px solid black; /*for example*/
}
.div-bottom{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-right: 1px solid black; /*for example*/
}

You can follow these examples and build all the lines you need. The HTML code must be like this

<div class="div-top"></div>
<div class="div-bottom"></div>