Unfortunately you have a flawed construct even for bootstrap.
You have set the image to 1200px height and then absolutely placed some content on top of the image. If the content is greater than 1200px (which it will be when it wraps) then your content overflows the image and the rest of the page.
What you should have done is placed the image as a background (background-size:cover) to the content and let the content dictate the height (or have a min-height).
I see no easy solution to this other than giving your main-text element a height of 1150px and setting its overflow to auto which will look a little messy. Alternatively hide the image on smaller screen altogether and remove the absolute positioning to put everything back in the flow.
A re-design of that section is required with more thought about how to make it responsive to start with rather than trying to squeeze stuff into bootstrap sliders and hoping for the best