Bootstrap 4 ordering columns on mobile/desktop

Question

I'm making a responsive layout for a ecommerce productdetailpage. I would like to order the columns different on mobile without getting white spaces. This is what it looks like currently:

The problem is on desktop when for example there is not content for box 3. There will be a huge white gap above box 5. So box 5 has to move under box 2. Like this:

I don't know if this is even possible through using framework Bootstrap 4, if not I'm looking forward to see how you would doing this without. Hopefully someone can help me out.

For the structure i use the following bootstrap grid:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row"> <div class="col-lg-7"> 1 </div> <div class="col-lg-5"> <div>2</div> <div>3</div> </div> </div> <div class="row"> <div class="col-lg-7"> 4 </div> <div class="col-lg-5"> 5 </div> </div>

Answer 1

It is necessary to know what layout should be applied, eg though JavaScript. Then when we will know what layout should be used, we can apply our layout.

So we car create a div and divide this div into two parts. Then using flex-grow property, we can fill the remaining space:

 html,body{height:100%;}.bg-purple { background: rgb(48,0,50); }.bg-gray { background: rgb(74,74,74); }.bg-blue { background: rgb(50,101,196); }.bg-red { background: rgb(196,50,53); }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-6 bg-red"> <div class="h-100 d-flex flex-column"> <div class="row justify-content-center bg-purple flex-grow-1"> <div class="text-white"> <div>1</div> </div> </div> <div class="row justify-content-center bg-blue flex-grow-1"> <div class="text-white">4</div> </div> </div> </div> <div class="col-6 bg-gray"> <div class="h-100 d-flex flex-column"> <div class="row justify-content-center bg-info" style="height: 30px;"> <div class="text-white"> <div>Column with fixed height 2</div> </div> </div> <div class="row justify-content-center bg-success flex-grow-1"> <div class="text-white">Fille the remaining space 5</div> </div> </div> </div> </div> </div>

An example at jsfiddle can be seen here

Answer 2

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container-fluid"> <,-- Control the column width: and how they should appear on different devices --> <div class="row"> <div class="col-sm-6" style="background-color;yellow:">50%</div> <div class="col-sm-6" style="background-color;orange:">50%</div> </div> <br> <div class="row"> <div class="col-sm-4" style="background-color;yellow.">33:33%</div> <div class="col-sm-4" style="background-color;orange.">33:33%</div> <div class="col-sm-4" style="background-color;yellow.">33.33%</div> </div> <br> <!-- Or let Bootstrap automatically handle the layout --> </div> </div>