How to setup breakpoints on nested rows Bootstrap - html

Question

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 :
This code below only work for the desktop size :
<div className="row wrapper-about">
<div className="col-lg-6 col-md-6 col-6">
<div className="img-box">
<img src="/pp1.jpg" alt="foto.jpg" />
</div>
</div>
<div className="col-lg-6 col-md-6 col-6">
<div className="row">
<div className="desc-container">
<h5 className="text-justify">
Content 2
</h5>
</div>
</div>
<div className="row desc2-d">
<span>
Content3
</span>
</div>
</div>
</div>

Answer 1

The simplest way (no extra CSS or duplicate markup) to get this layout would be to disable flexbox for the larger screen width and use the float utils:
https://www.codeply.com/go/snVOquHz1k
<div class="container">
<div class="row d-md-block">
<div class="col-6 col-md-8 float-left border border-danger c1">
c1
</div>
<div class="col-6 col-md-4 float-left border border-success">
c2
</div>
<div class="col-12 col-md-4 float-left border border-warning">
c3
</div>
</div>
</div>
Similar questions have been answered before:
Rearranging responsive Bootstrap 4 grid layout
Bootstrap with different order on mobile version
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Bootstrap 4 - Stack 2 columns with 1 large column on the right

Answer 2

With the Bootstrap grid, you'd have to place the C3 div twice. Once inside the 2nd column of the first row (for desktop view) and the other below the first row (for mobile view); Then toggle the visibility based on the 768px breakpoint to get what you wanted...
code snippet below:
.divC1 {
border: 5px solid red;
height: 300px;
}
.divC2 {
border: 5px solid green;
height: 150px;
}
.divC3 {
border: 5px solid yellow;
height: 150px;
}
#media screen and (max-width:768px) {
.divC2 {
height: 300px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class='col-6 col-sm-6'>
<div class="row">
<div class="col-sm-12 divC1"> C1
</div>
</div>
</div>
<div class='col-6 col-sm-6'>
<div class="row">
<div class="col-sm-12 divC2"> C2
</div>
<div class="col-sm-12 divC3 d-none d-md-block"> C3
</div>
</div>
</div>
<div class='col-12 divC3 d-block d-md-none'> C3
</div>
</div>
</div>

Answer 3

I think following code will help you.
.c1 { height:200px; outline:2px solid red; outline-offset: -5px; }
.c2 { height:100px; outline:2px solid green; outline-offset: -5px; }
.c3 { height:100px; outline:2px solid yellow; outline-offset: -5px; }
#media only screen and (max-width:768px) and (min-width:200px) {
.c1 { height:auto; }
.c2 { height:auto; }
.c3 { height:auto;}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c1">
C1
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 c2">
C2
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 c3">
C3
</div>