Responsive CSS position - css

Question

please help me with this https://jsfiddle.net/duonglam271/spdqL73a/
I could not position the tree and those fished
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>
Example

Answer 1

I have a look and this issue you are using the wrong measurement of grid system as it's work well with 12 grids
for 4 columns as it needs to be divided to col-3 each as 12 in total. you are using col-2 which is total in 8 which left col-4 in space and cause layout issue unless you need to put Horizontal alignment.
so I suggest you have look at grid layout and it will help you much understand
suggest code that I wrote and working on my side
<div class="col-12 skill-level">
<div class="col-3">
<h2>Beginner</h2>
</div>
<div class="col-3 ">
<h2>Familiar</h2>
</div>
<div class="col-3 ">
<h2>Intermediate</h2>
</div>
<div class="col-3 ">
<h2>Professional</h2>
</div>
</div>
Please have a look at https://v4-alpha.getbootstrap.com/layout/grid/
Have a fun with code

Answer 2

You can use media queries for it. I added custom font-size to h2.
h2 {
font-size:16px;
}
.coral {
float: left;
padding-top: 2%;
}
.coral img {
width: 80%;
}
.col-9 {
width: 73%;
display: inline-block;
}
.col-3 {
width: 23%;
display: inline-block;
position: relative;
}
.col-2 {
width: 16.66%;
display: inline-block;
}
.skill-header {
padding-top: 2%;
text-align: center;
font-size: 100%;
}
.skill-level {
padding-left: 1%;
font-size: 100%;
}
.crab {
width: 70%;
margin-top: 20%;
}
#media only screen and (max-width: 768px){
h2 {
font-size:11px;
}
}
#media only screen and (max-width: 768px){
h2 {
font-size:9
}
}
<div class="container div-5">
<div class="row">
<div class="col-3 coral">
<img src='https://i.imgur.com/y7ciVbe.png' />
</div>
<div class="col-9">
<div class="col-12 skill-header">
<h1>Skills</h1>
</div>
<div class="col-12 skill-level">
<div class="col-2 ">
<h2>Beginner</h2>
</div>
<div class="col-2 ">
<h2>Familiar</h2>
</div>
<div class="col-2 ">
<h2>Intermediate</h2>
</div>
<div class="col-2 ">
<h2>Professional</h2>
</div>
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
<div class="col-2 ">
<img class="crab" src='https://i.imgur.com/UghhNt0.png' />
</div>
</div>
</div>
</div>