How to reorder the bootstrap grid system? - css

Question

I'm new to bootstrap and I've only created grid system with pure css, I'm just learning yet how to use bootstrap. I just want to know how can I make like 20% 80% of the column of the grid and for the second grid (80%) it is something like a two rows which is 50% 50% and the main object is at second column second grid. To understand briefly here is my example. (Additional i don't know where to or what to search about how to reorder in grid system of bootstrap since it doesn't make me understand it very well.)
*,*::after,*::before {
padding:0;
margin:0;
}
.grid-system {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 20% 80%;
}
.grid-column1 {
background:pink;
}
.grid-column2 {
display:grid;
grid-template-columns:50% 50%;
grid-column: 2/2;
}
.first-column {
grid-column: 0/2;
display: grid;
grid-template-rows: 50% 50%;
}
.grid-row {
display:flex;
align-items:center;
justify-content:center;
background:red;
}
.grid-row:nth-child(2) {
background:green;
}
.second-column {
grid-column:2/2;
display:grid;
background:orange;
display:flex;
align-items:center;
justify-content:center;
}
<div class="grid-system">
<div class="grid-column1">
</div>
<div class="grid-column2">
<div class="first-column">
<div class="grid-row">
1
</div>
<div class="grid-row">
2
</div>
</div>
<div class="second-column">
<div class="main-row">
HERE SOME IMAGES
</div>
</div>
</div>
</div>
Something like this..because I can't get any information about bootstrap reordering a columns or row or something else...It is just teachning the basic stuffs of cols-row and etc blah blah.