Html 如何使标题图像全屏显示50%，然后在某一点堆叠，并开始跨越整个宽度？

我有两个标题图片共享我的全宽标题的49%，它们并排排列。我正在使用一个我已经进一步定制的响应性骨架主题。我想两个标题图像共享浏览器宽度的一半，直到某个断点。我的页面内容的其余部分大约是770像素。我希望2个标题图像堆叠在那个点上，但开始跨越100%的宽度

---

这是我的网站

http://www.stonesgamblinghall.com/dev

答案应该大致如下：

.header {width:49%;}
@media screen and (max-width: 770px)
{
    .header{width:100%;}
}

---

欢迎来到堆栈溢出！始终记得阅读输入标记时出现的有用说明。此外，请在问题本身中包含问题代码。我们不需要访问外部站点来帮助您，因为如果该站点崩溃，您的问题将完全无法回答。