CODEWITHSUNDEEP
csshtmlbootstrap-4
KevInSol
KevInSol

Reputation: 2610

Bootstrap 4 grid - 3 stacked columns on left, 1 on right

I've been trying to get a Bootstrap 4 layout as shown below:

enter image description here

On large devices I need the Search Form, CTAs and Button ads to go in a vertical column 4 wide while the Content will occupy all the space on the right (with variable content and being able grow downwards as required).

For small devices, I want Search Form, CTAs, Content and Button ads to display in that order, taking 100% of screen width.

I'll use the grid ordering classes to alter the normal flow. But for now, I'm stuck and can't the desired layout for large devices. The code I've tried is shown below, but the Content is always below the other items instead of beside it.

This question seems to address this, but the push/pull classes are now gone?

My code (2 tries)

<div class="row align-items-start">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div class="w-100"></div>

  <div  class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div> 






<div class="row ">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div style='float:right;' class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div>

Upvotes: 3

Views: 4662

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362380

You need to disable the flexbox (d-md-block) and use floats on the columns at larger screen widths. Then use flexbox order-* for smaller/mobile screen widths.

<div class="container-fluid">
    <div class="row d-md-block">
        <div class="col-md-4 float-left">
            <div style="height:50px;width:100%;background-color: red;">A</div>
        </div>
        <div class="col-md-8 float-right order-1">
            <div style="height:150px;width:100%;background-color: green;">C</div>
        </div>
        <div class="col-md-4 float-left order-0">
            <div style="height:50px;width:100%;background-color: blue;">B</div>
        </div>
        <div class="col-md-4 float-left order-last">
            <div style="height:50px;width:100%;background-color: yellow;">D</div>
        </div>
    </div>
</div>

https://codeply.com/go/jfARR4GYE4

Related:

Bootstrap with different order on mobile version
https://codeply.com/go/mKykCsBFDX

A-B-C-D A-C-B-D

Upvotes: 6

borbesaur
borbesaur

Reputation: 691

You can do it like this 

.top{
    background-color: yellow;
    height: 50px;
}

.left-side{
    width: 100%;
}

.first{
    background-color: aqua;
}
.second{
    background-color: green;
}

.third{
    background-color: aquamarine;
}



.content{
    height: 300px;
    background-color: grey;
    width: 100%;
   
}

.show-on-small{
    display: none;
}

@media only screen and (max-width: 768px) {
    
     .show-on-small{
        display: block;
    }

    .hide-on-small{
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="sty.css">
</head>
<body>

<div class="container-fluid"> 

    <div class="row">
        <div class="col-12 top">
            MD Desktop
        </div>
    </div>

    <div class="row">
 
        <div class="col-md-4">
            <div class="left-side first">SEARCH FORM</div>
            <div class="left-side second">CTAs</div>
            <div class="left-side third hide-on-small">BUTTON ADS</div>
        </div>
        
        <div class="col-md-8">
            <div class="content">CONTENT</div>
        </div>
        
        <div class="col-md-4 show-on-small">
                <div class="left-side third">BUTTON ADS</div>
        </div>
          
    </div>
</div>
    
</body>
</html>

Upvotes: 1

Adi.P
Adi.P

Reputation: 400

You can use the order property of flexbox to order in the way you want. You can use media queries to achieve different ordering in different viewports. Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items for more details.

Upvotes: -1

Related Questions