How to setup breakpoints on nested rows Bootstrap

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>

Carol Skelly · Accepted Answer · 2019-09-10T12:33:39.080

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

score 0 · Answer 2 · answered Sep 10 '19 at 03:57

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>

score 0 · Answer 3 · answered Sep 10 '19 at 04:24

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>

Hi @panji gemilang, check above code snippet on a full page and mobile view. — Sandeep, Sep 10 '19 at 05:20
Hi @panji gemilang , It's all about divisions height and media query for different devices. First I give C1 height to 200 and other 2 divs C2 and C3 height is half of C1 at the desktop view. And then for the mobile view, I gives height auto to mobile view where Bootstrap div CSS works for mobile view and the final output is generated. :) — Sandeep, Sep 10 '19 at 13:43

How to setup breakpoints on nested rows Bootstrap

3 Answers3