Div in graphic form

Question

Good afternoon. I am developing a project in front-end, new experience.

I need to create a "chart" in ranking format. However, the Divs start from top to bottom, I need to reverse this. How do I? My code is below.

Thank you.

.rank-1 {
	background-color: #8ccfc3;
	margin-left: 30px;
	height: 190px;
	
}

.rank-2 {
	background-color: #8ccfc3;
	margin-left: 30px;
	height: 150px;
	
}

.rank-3 {
	background-color: #8ccfc3;
	margin-left: 30px;
	height: 210px;
	
}

.rank-4 {
	background-color: #8ccfc3;
	margin-left: 30px;
	height: 230px;
	
}

.rank-5 {
	background-color: #8ccfc3;
	margin-left: 30px;
	height: 170px;
	
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
 		<div class="ranking">
			<div class="row container-fluid">
	 			<div class="col-1 rank-1"></div>
	 			<div class="col-1 rank-2"></div>
	 			<div class="col-1 rank-3"></div>
	 			<div class="col-1 rank-4"></div>
	 			<div class="col-1 rank-5"></div>
			</div>
		</div>
	</div>

Answer 1

Since you are using Bootstrap 4 you can use the flex class align-items-end, this will align the Col at the base of the Row, since it is already a flex container. Bootstrap 4 flex documentation link https://getbootstrap.com/docs/4.0/utilities/flex/

Behold

.rank-1 {
  background-color: #8ccfc3;
  margin-left: 30px;
  height: 190px;
  
}

.rank-2 {
  background-color: #8ccfc3;
  margin-left: 30px;
  height: 150px;
  
}

.rank-3 {
  background-color: #8ccfc3;
  margin-left: 30px;
  height: 210px;
  
}

.rank-4 {
  background-color: #8ccfc3;
  margin-left: 30px;
  height: 230px;
  
}

.rank-5 {
  background-color: #8ccfc3;
  margin-left: 30px;
  height: 170px;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="ranking">
    <div class="row container-fluid align-items-end">
        <div class="col-1 rank-1"></div>
        <div class="col-1 rank-2"></div>
        <div class="col-1 rank-3"></div>
        <div class="col-1 rank-4"></div>
        <div class="col-1 rank-5"></div>
    </div>
  </div>
</div>