Displaying Widget Boxes Vertically - html

Question

I currently have this kind of display for each record.
So per record I have two boxes which is Afternoon and Night. As you can see I am displaying each record horizontally with this code for reference:
<div id="record_box">
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
</div>
So each record is this inside this block
<div class="row" style="padding-left: 10px; padding-right: 10px;">
But my what if I want to display each record vertically? In a grid, 12 is the max size right? I have a fixed maximum number records that I need to display, and it's only 4. So I can make each record like col-3. What I mean also by vertical is if I have 1 record, Afternoon is on top, then night is bottom. Then the right will be blank. Like this:

Answer 1

I have create basic structure for you, now you can make necesssary changes in it.
css :
.panel-box {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.panel-box .panel-heading {
padding: 20px 10px;border: 1px solid rgba(86,61,124,.2);
}
.panel-box .panel-heading .fa {
margin-top: 10px;
font-size: 58px;
}
.panel-box .list-group-item {
color: #777777;
border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-box .panel-body {
font-size: 20px;
color: #777777;
padding: 20px;
margin: 0px;border: 1px solid rgba(86,61,124,.2);
}
HTML :
<div class="container">
<div class="row">
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
This will generate structure like below image: