Html 设置带有列的页脚链接的样式

我目前正在制作一个样式化的页脚，里面有三列和链接。除了我想放在三栏下面的版权线之外，一切都很好。问题：它粘在第三列旁边，不会向下移动。我试着用一些方法来做这件事；还有p和br标签黑客。这在桌面上运行良好，但在移动设备上看起来很糟糕。我想要这个。你们知道怎么把版权线放在三列的左下方吗？谢谢你的帮助

这就是我目前得到的。（这里还有一把小提琴：）

页脚{
高度：自动；
填充：1px15px；
宽度：自动；
}
#页脚信息选项卡{
浮动：左；
宽度：自动；
填充：10px；
}
#页脚资源选项卡{
宽度：自动；；
浮动：左；
文本对齐：对齐；
填充：10px；
}
#页脚\u推荐\u选项卡{
浮动：左；
宽度：自动；
文本对齐：对齐；
填充：10px；
}
信息Bla
Bla
Bla
Bla

资源Bla
Bla
Bla
Bla
Bla

我们推荐Bla
Bla
Bla
Bla





和#x24B8；2011-2017年公司。版权所有。

您应该使用

清除：左

将版权段落置于左对齐元素下方。

应使用

清除：左将版权段落置于左对齐元素下方。
将窗口调整为smartphone大小，然后查看发生了什么将窗口调整为smartphone大小，然后查看发生了什么
<style type="text/css" media="screen">
footer{
 height: auto;
 padding:1px 15px;
 width:auto;
 }
#footer_info_tab{
 float:left;
 width:auto;  
 padding:10px;
}
#footer_resources_tab{
 width:auto;;       
 float:left;
 text-align:justify;
 padding:10px;
 }
#footer_recommend_tab{
float: left;
width:auto;
text-align: justify; 
padding:10px;
}

</style>

<footer>
  <div id="footer_info_tab"><b>Info</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <div id="footer_resources_tab"><b>Resources</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <div id="footer_recommend_tab"><b>We Recommend</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <p><br>&nbsp;<p><br>&nbsp;<p><br>&nbsp;<br>&#x24B8;&nbsp;2011-2017 Company. All rights reserved.
</footer>