2つのdivが重なり、修正する方法は？

Question

明らかに、私は同じ行に2つのdivがありますが、PC上ではOKですが、Ipadやモバイルでは表示されません。誰でもコードを見て、私が逃したことを教えてください。

これはYouTube動画で重複しているコンテンツです。

コード：ベター

.timeline { 
 
    padding: 0px 30px; 
 
    width: 100%; 
 
    } 
 

 
    .timeline:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 45px; 
 
    width: 3px; 
 
    height: calc(100% - 0px); 
 
    background: #13294b; 
 
    } 
 

 
    .timeline .column { 
 
    margin: 20px 20px 20px 80px; 
 
    } 
 

 
    .h1 { 
 
    font-size: 55px; 
 
    color: #6a6a6a; 
 
    font-family: serif; 
 
    padding: 60px 0px 60px 0px; 
 
    font-weight: bold; 
 
    } 
 

 
    .icon { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -120px; 
 
    top: 40px; 
 
    background: #fff; 
 
    } 
 

 
    .timeline .column .title h2 { 
 
    margin-top: -70px; 
 
    margin-left: 115px; 
 
    font-size: 20px; 
 
    } 
 

 
    .timeline .column .description p { 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
    margin-left: 20px; 
 
    margin-top: 10px; 
 
    } 
 

 
    .timeline .column .description { 
 
    border-left: 2px solid #59cbe8; 
 
    border-bottom: 2px solid #59cbe8; 
 
    } 
 

 
    .video { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: -90px;

<div class="timeline"> 
 
    <div class="column"> 
 
    <div class="title"><div class="icon"><img src="source"></div> 
 
    <div class="h1">2017</div> 
 
    <h2> title </h2></div> 
 
    <div class="description"> 
 
    <div class="video"> 
 
    <iframe width="280" height="158" src="youtube video link" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 

 
    <p>content</p> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

<div class="timeline"> 
<div class="column"> 
<div class="title"><div class="icon"><img src="source"></div> 
<div class="h1">2017</div> 
<h2> title </h2></div> 
<div class="description"> 
<div class="video"> 
<iframe class="iframe" width="280" height="158" src="youtube video link" frameborder="0" allowfullscreen></iframe> 
</div> 

<p>content</p> 
</div> 
</div> 
</div> 

一部のメディアクエリー

.timeline { 
padding: 0px 30px; 
width: 100%; 
} 

.timeline:before { 
content: ""; 
position: absolute; 
top: 20px; 
left: 45px; 
width: 3px; 
height: calc(100% - 0px); 
background: #13294b; 
} 

.timeline .column { 
margin: 20px 20px 20px 80px; 
} 

.h1 { 
font-size: 55px; 
color: #6a6a6a; 
font-family: serif; 
padding: 60px 0px 60px 0px; 
font-weight: bold; 
} 

.icon { 
content: ""; 
position: absolute; 
left: -120px; 
top: 40px; 
background: #fff; 
} 

.timeline .column .title h2 { 
margin-top: -70px; 
margin-left: 115px; 
font-size: 20px; 
} 

.timeline .column .description p { 
font-size: 14px; 
line-height: 20px; 
margin-left: 20px; 
margin-top: 10px; 
} 

.timeline .column .description { 
border-left: 2px solid #59cbe8; 
border-bottom: 2px solid #59cbe8; 
} 

.video { 
position: absolute; 
right: 0px; 
top: -90px; 

@media only screen and (max-width: 500px) { 
    .iframe 
{ 
    //your css 
} 

}