How to use column wise verticle grid using Bootstrap in HTML - html

Question

I been trying to display below attached image vertical column wise Grid view using Bootstrap in HTML. Can give me some idea for how we can achieve this .
Now i am normally display row wise column grid with reference of Grid systems on w3school.but this are not responsive to mobile view. So I need to display on vertical
Thank you in advance !!

Answer 1

I divided thesection into vertical columns. Inside each column I inserted row class to further divide row into column.
h2,h1 {
background-color: #ffffff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section class="text-center clearfix">
<!-- Divided sections into column-->
<div class="col-4 float-left" style="background-color:red">
<h1>col-1</h1>
<!-- Each column contains row-->
<div class="row" style="background-color: #ff3333">
<!-- You can further divide vertical column-->
<div class="col-6">
<h2>item-1(a)</h2>
</div>
<div class="col-6">
<h2>item-1(b)</h2>
</div>
</div>
<div class="row" style="background-color: #ff4d4d">
<h2>item-2</h2>
</div>
</div>
<div class="col-4 float-left" style="background-color:green">
<h1>col-2</h1>
<div class="row" style="background-color:#1aff66">
<h2>item-1</h2>
</div>
</div>
<div class="col-4 float-left" style="background-color:blue">
<h1>col-3</h1>
<div class="row" style="background-color: #0069cc">
<h2>item-1</h2>
</div>
<div class="row" style="background-color: #4d94ff">
<h2>item-2</h2>
</div>
<div class="row" style="background-color: #b3d1ff">
<h2>item-3</h2>
</div>
<div class="row" style="background-color: #cce6ff">
<h2>item-4</h2>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 2

For vertical column wise Grid view you can use
$('.grid').masonry({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true
})
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
<div class="grid">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
...
</div>
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
You can use this link for reference
https://masonry.desandro.com/

Answer 3

You can use bootstrap 4 flex utility
https://getbootstrap.com/docs/4.0/utilities/flex/