Html 带3列的响应Div

Hi有3个div，包括文本、图像和视频。在我的浏览器上看起来不错，但当我打开我的页面时，小页面（响应）看不到视频和图像

<style type="text/css">

.wrap {
    display: table;
}

.wrap div{
    display: table-cell;
    vertical-align: top;
    padding: 20px;

}

</style>

<div class="wrap">
   <div class="">
      <span><strong>text:</strong></span><br>
      <span>text</span><br>
      <span>text</span><br>
      <span>text</span><br>
      <span><strong>text:</strong></span><br>
      <span>text</span><br>
   </div>
   <div class="">
      <img src="myimage.jpg">   
   </div>
   <div class="">
      <iframe width="560" height="315" src="myvideourl" frameborder="0" allowfullscreen=""></iframe>     
   </div>
</div>

.包裹{
显示：表格；
}
.包裹部{
显示：表格单元格；
垂直对齐：顶部；
填充：20px；
}
文本：

文本

文本

文本

文本：

文本

---

在这种情况下，我想创建一个单独的列。

使用带有display:table行的媒体查询，如下所示

@media only screen and (max-width: 767px) {
 .wrap div{
    display: table-row;
    vertical-align: top;
    padding: 20px;
    text-align:center;

}
}

.wrap{
显示：表格；
}
.包裹部{
显示：表格单元格；
垂直对齐：顶部；
填充：20px；
}
@仅介质屏幕和（最大宽度：767px）{
.包裹部{
显示：表格行；
垂直对齐：顶部；
填充：20px；
文本对齐：居中；
}
}

文本：

文本

文本

文本

文本：

文本

body，html{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
.包裹{
宽度：100%；
身高：100%；
}
.sub{
浮动：左；
身高：100%；
溢出：自动；
显示：块；
最小宽度：100px；
}
.sub1{
宽度：计算（（100%-560px）/2）；
}
.sub2{
宽度：计算（（100%-560px）/2）；
}
.sub3{
宽度：560px；
}
iframe{
宽度：计算（100%-2px）；
高度：计算（100%-2px）；
边框：1px纯黑；
}
@仅介质屏幕和（最大宽度：760像素）{
.包裹{
溢出y：自动；
}
.wrap.sub{
宽度：100%；
}
}

文本：

文本

文本

文本

文本：

文本