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 :

[![enter image description here](https://i.stack.imgur.com/DeyD0.png)](https://i.stack.imgur.com/DeyD0.png)

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: 
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](https://stackoverflow.com/questions/55264243/rearranging-responsive-bootstrap-4-grid-layout/55264594#55264594)  

[Bootstrap with different order on mobile version](https://stackoverflow.com/questions/48882342/bootstrap-with-different-order-on-mobile-version)  

[One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4](https://stackoverflow.com/questions/50141694/)  

[Bootstrap 4 - Stack 2 columns with 1 large column on the right](https://stackoverflow.com/questions/52043047/bootstrap-4-stack-2-columns-with-1-large-column-on-the-right)
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:

```css
.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
  }
}
```

```html
<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>
```