如何使用bootstrap和css使元素响应?

我有一个简单的部分,我有左内容和右内容,在左内容我有一堆文本,在右边我有两个椭圆/圆,我希望这些椭圆或圆是有响应的。这里是jsfiddle live demo

这是我目前所拥有的

HTML格式

<div class="container">
   <div class="row">
       <div class="col-lg-6 col-md-12 col-xs-12">
          left content
       </div>

        <div class="col-lg-6 col-md-12 col-xs-12">

         <div class="c1">
            <div class="connect1"></div>
            </div>

          <div class="c2">

          </div>
         </div>

    </div>
</div>

这里是css

.c1, .c2 {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: aqua;
  position: absolute;
}

.c1 {
  left: 20px;
  top: 50px;
}

.connect1 {
  position: absolute;
  right: -80px;
  top: 130px;
  background: orange;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.connect1::before, .connect1::after {
  content: '';
  display: block;
  background: orange;
  height: 10px;
  position: absolute;
  z-index: -1;
}
.connect1::before {
  width: 200px;
  top: -20px;
  left: -180px;
  transform: rotate(20deg);
}
.connect1::after {
  width: 200px;
  right: -160px;
  top: 70px;
  transform: rotate(35deg);
}

.c2 {
  left: 300px;
  top: 180px;
}

上面的解决方案为我提供了一个移动设备

以下是移动设备上的预期结果