Bentouhami Faisal

One way to implement this "grid system using Bootstrap" (actually, this is not exactly a grid system, but a flex system) is to place the progress bar twice in the code (once in the picture and once after the text) and show/hide them using the display utility class (v4 Documentation,v5 Documentation).

There should be.d-none.d-md-blockunder the picture, and.d-block.d-md-nonecode>.# under the text. ## If you want them to swap at different breakpoints, change
mdtosmorlg.If you apply the default display of this element to "flex", replace
*-blockwith the*-flexclass.

View it in action

here.

Alternatively, you can copy the text (instead of the progress bar) and apply the same technique.

---

Comments:

• The main disadvantage of this technique is that it makes it overly complex to apply/remove event listeners to repeated elements or their descendants.

  However, some front-end frameworks (Vue, React) provide built-in "portal" components that are essentially able to render their content within the target element and be placed at different locations in the DOM based on controller logic without losing events ( The elements are not destroyed, but moved). As far as I know, Angular doesn't provide this functionality out of the box. There may be a plugin for this, though.
  

• If these three elements are all child elements of the same parent element, this layout can also be achieved using custom CSS, using

  display: gridon the parent element and defininggrid -template-area(orgrid-template-rowsandgrid-template-columns) responsive. But this means abandoning the Bootstrap grid system for that container and having to write your own CSS to control column widths responsively.

• It's not clear from the sketch you made whether you want the text to be scrollable on mobile, with the image fixed to the top and the progress bar fixed to the bottom. This will undoubtedly create a problematic user experience. A better user experience on mobile devices is to make the entire page scrollable.

• Your markup (HTML) is invalid: You closed the

  of the title prematurely, and you did not close all layouts

  代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
• Other markup issues: Do not use

  inside a

  element (or vice versa); do not put multiple paragraphs in the same

  element, and avoid using the

  
tag; never place.rowdirectly as another.rowChild (you should wrap this in.col). And make sure your code passes HMTL validation.

---

I have fixed everything mentioned in the example provided above.