Jquery 滑入具有流体容器宽度的侧栏

我想模拟搜索激活的边栏，如图所示。侧边栏需要从左侧滑入，而“压缩”压缩的东西正在破坏流体宽度容器，并且需要在手机上默认可见。我已经通过媒体查询找到了这一部分。我正在为我的项目使用引导和JQuery。我尝试过多种解决方案，但都以惨败告终

说到细节，我有一排2'col-lg-6'。我希望在单击搜索栏时将其压缩为单个文件。除了压缩它的方法之外，我什么都想好了

以下是图片

这是到的链接

---

编辑：我一直在尝试一种新的方法，包括一个响应网格和一个非画布搜索栏。似乎是朝着正确的方向发展。

请更详细地解释问题，并向我们展示您尝试过的代码，以便我们可以帮助您。我已将其链接到网站的测试版本。在这里发布代码相当长。此外，这种尝试也不会有多大帮助。谢谢你愿意帮忙！