htmlbootstrap-4responsive-designgridgrid-system

Bootstrap Responsive Grid Columns without Clearing

I need to make a simple responsive Bootstrap Grid but I'm stuck..

I have 3 columns where 1= Header, 2= Image with height and 3= action Button.

On mobile every col has 12 width, and on larger screens 6

MOBILE

1 HEADER
2 IMAGE
3 ACTION

LARGER SCREENS

1 HEADER 2 IMAGE WITH HEIGHT
         2 IMAGE
3 ACTION

What I need is to make the 3 ACTION div not being cleared by the 2 IMAGE DIV.

Expected:

1 HEADER 2 IMAGE
3 ACTION 2 IMAGE

Sorry for my poor english. Can you help me?

Solution

  • This use case is not achievable out of the box with the grid-layout in Bootstrap. But we can achieve this with a duplicate "action" div which we can toggle on our required breakpoint.

    working snippet below:

    .row div {
  border: 1px dotted red;
}

.tallDiv {
  height: 300px;
  background: lightblue;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="row">
        <div class="col-12">
          <h3>Header</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-12 d-block d-sm-none d-md-block">
          <h3>Action-duplicate</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 tallDiv">
      <h3>Image</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-12 col-md-6 d-sm-block d-md-none ">
      <h3>Action</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>