title: How to setup breakpoints on nested rows Bootstrap
body: <p>I'm currently learning to make a responsive website. I'm confused about how do I do the breakpoints of the content when the screen size changed. Here's what I wanted to do :</p>
  
  <p><a href="https://i.stack.imgur.com/DeyD0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DeyD0.png" alt="enter image description here"></a></p>
  
  <p>This code below only work for the desktop size :</p>
  
  <pre><code>             &lt;div className="row wrapper-about"&gt;
                  &lt;div className="col-lg-6 col-md-6 col-6"&gt;                  
                      &lt;div className="img-box"&gt;
                        &lt;img src="/pp1.jpg" alt="foto.jpg" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                 &lt;div className="col-lg-6 col-md-6 col-6"&gt;
                    &lt;div className="row"&gt;
                        &lt;div className="desc-container"&gt;
                          &lt;h5 className="text-justify"&gt;
                            Content 2
                          &lt;/h5&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="row desc2-d"&gt;
                        &lt;span&gt;
                          Content3                   
                        &lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
  </code></pre>