Html 表单元格的响应问题

我正在以下页面上寻找解决方案：

我遇到问题的区域是“位置”下的表格。缩小浏览器的大小后，我希望表中的每一行按如下所示进行分解：

地名

地址

在地图上查看（按钮）即将进行的演示（按钮）

如果有绿色背景，上述内容也应显示在绿色背景中的一行中

.wtb表{
显示：表格；
宽度：100%；
}
.wtb第一排{
显示：表格行；
}
.wtb第一行.wtb地名.wtb第一行.wtb地址{
背景#f2f8f2；
}
.wtb第二排{
显示：表格行；
}
.wtb地名{
显示：表格单元格；
颜色：#707070；
字体大小：20px；
字号：600；
填充：15px 0 15px 2%；
文本对齐：左对齐；
宽度：30%；
}
.wtb地址{
显示：表格单元格；
颜色：#707070；
字号：18px；
字体大小：400；
文本对齐：右对齐；
右：2%；
宽度：30%；
}
.wtb视图btn{
显示：表格单元格；
背景：无；
宽度：15%；
}
.wtb视图btn分区{
}
.wtb视图btn分区a{
字体大小：14px；
颜色：#007940；
填充：10px 20px；
字号：600；
边框：2个实心#007940；
边界半径：5px；
}
.wtb演示{
显示：表格单元格；
背景：无；
宽度：15%；
}
.wtb演示a{
填充：10px 20px；
背景#abc13d；
边界半径：5px；
颜色：#fff；
字体大小：14px；
字号：600；
}

地名
1234地址：加拿大渥太华圣
地名
1234地址：加拿大渥太华圣
地名
1234地址：加拿大渥太华圣

调整页面大小时，您的按钮出现了问题。试试这个：

<div id="test">
<div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
<div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
</div>

#test {
width: 366px;
}

#试验{
宽度：366px；
}

只需在类为“class=”wtb view btn“的div之前添加一个div，在类为“class=”wtb demo“的div之后添加一个div

将宽度添加到此分区。

请使用引导

地名
1234地址：加拿大渥太华圣
地名
1234地址：加拿大渥太华圣
地名
1234地址：加拿大渥太华圣

查看媒体问题您具体有什么问题？我在小浏览器上看到您的链接/按钮崩溃widths@JamesKing看起来我的第一篇文章没有显示我想要的格式。当调整大小时，我需要每个表行一次显示一行内容。因此，“地点名称”将是第一行，第二行是“地址”，然后下面的按钮将是第三行。实际上，要实现您的目标，需要进行很多更改。默认情况下，您需要将表中的所有div显示为：block或inline block，然后使用媒体查询仅将它们转换为表行/单元格。您还需要将BG颜色应用于行div，而不是单元格。这并不能实现我所寻找的目标。我需要更改该表，以便一行中的每一行文本都位于另一行的顶部，按钮位于其下方。

   <div class="wtb-table col-md-12">
    <div class="wtb-row-one col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
        <div class="clear"></div>
    </div>
    <div class="wtb-row-two col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo">&nbsp;</div>
        <div class="clear"></div>
    </div>
    <div class="wtb-row-one col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
    </div>
</div>