Right now you’ve got a layout for ‘large’ size, but no alternative layouts for smaller size screens.
Where you have
<div class="col-lg-7"> and
<div class="col-lg-5"> for your two columns you could add classes to control responsive alternative layouts for different screen sizes. The different sizes are xs, sm, md, and lg (sorry if I’m telling you stuff you already knew. I may have misunderstood your question). xs=extra small (smartphone), sm=small (tablet), md=medium (small desktop/laptop screen and possibly landscape tablet), lg=large (big desktop screens).
So to accommodate smartphone layouts you would add col-xs-xx (xx being the number of Bootstrap grid columns wide you want that div to be on smartphones). You’d just add the different classes for the different widths you need.
For example with your current layout you could have…
<div class="col-xs-12 col-md-6 col-lg-7"> and
<div class="col-xs-12 col-md-6 col-lg-5">
This would ensure for an extra small screen (portrait screen smartphone) the first div would fill all 12 Bootstrap grid columns and the second div would fill all 12 Bootstrap grid columns, positioning them one after the other.
For the medium layout (smaller desktop screens) the divs would be equal widths (6 Bootstrap grid columns each). For larger screens you’d still have your original layout.
There’s no way to fix it quickly, but fixing it thoroughly will ensure a great responsive website.