To implement this strategy of utilizing Bootstrap's grid system (which, in actuality, functions more like a flex system), you can include the progress bars twice in your code (once after the image and once after the text) and manage their visibility using display utility classes (v4 docs, v5 docs).
The progress bar below the image should have the classes .d-none.d-md-block, while the one below the text should have .d-block.d-md-none. Switch the md to sm or lg for different breakpoints, and if the element defaults to "flex" display, swap *-block with *-flex classes.
View a functional demo here.
Alternatively, you could duplicate the text instead of the progress bars and apply the same technique.
Points to Note:
The downside of this approach is the complexity it adds to manipulating event listeners for the duplicated element or its children. Nevertheless, certain frontend frameworks (such as Vue and React) feature built-in "portal" components that can render their contents within a different DOM location based on controller logic, preserving events. As far as I know, Angular does not offer this functionality by default, but there may be a plugin available.
This layout can also be achieved with custom CSS by ensuring all three elements are children of the same parent, utilizing display: grid and setting grid-template-areas (or grid-template-rows & grid-template-columns) responsively. However, this would require abandoning Bootstrap's grid system for that container and crafting your own CSS for responsive column control.
It is not evident from the sketches whether you intend for the text to be scrollable on mobile with a fixed-top image and fixed-bottom progress bars. This configuration could result in a suboptimal user experience. A preferable approach on mobile devices is to enable full-page scrolling.
There are HTML markup issues present: premature closure of the <h2> tags for the title and improper closure of layout <div>s. Your IDE should typically flag these errors. Not adhering to these practices might lead to disqualification in an interview or job application scenario for not utilizing an IDE effectively.
Additional markup concerns include avoiding the nesting of <p> within <h*> elements (or vice versa), refraining from placing multiple paragraphs within a single <p> tag, and minimizing the use of <br> tags. Avoid placing a .row directly within another .row (wrap it within a .col instead). Ensure your code passes HTML validation checks.
I have rectified all the issues highlighted above in the provided example.