Setting (bootstrap) col width's with media queries - html

Question

I have a page with a banner and 3 columns, and I am trying to make it so that when the screen width gets too small, that the first 2 columns change from 1/3rd width to 50% width and the last column width change to 100% so that it's below the first two.
When I do this, the height of the columns does change (they change to 50%, considering the columns will now fit underneath each other inside a 100% row), but the width does not. How could I fix this? Thanks in advance!
Codepen
HTML
<section class="section">
<div class="container-fluid">
<div class="aboutBanner"> </div>
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
</section>
related CSS
.aboutBanner {
height: 30%;
border: 1px solid blue;
}
.row {
height: 70%;
}
.row .col {
height: 100%;
border: 1px solid red;
}
#media screen and (max-width: 768px){
.row .col:nth-of-type(1),
.row .col:nth-of-type(2) {
height: 50%;
width: 50%;
}
.row .col:nth-of-type(3) {
height: 50%;
width: 100%;
border-style: dashed;
}
}

Answer 1

Use the Bootstrap responsive grid columns...
https://codepen.io/anon/pen/eMzRyb
<section class="section">
<div class="container-fluid">
<div class="aboutBanner">
</div>
<div class="row">
<div class="col-sm-4 col-6">
</div>
<div class="col-sm-4 col-6">
</div>
<div class="col-sm-4 col-12">
</div>
</div>
</div>
</section>
To visualize this in your codepen I changed the CSS...
.row {
height: 70%;
}
.row > div {
border: 1px solid red;
}
Also see:
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

Answer 2

Use bootstrap col-[size] class
See documentation
The bootstrap grid is based in 12 columns sizes, that are divided in 5 screen sizes:
Extra small
col-[1 to 12]
Small
col-sm-[1 to 12]
Medium
col-md-[1 to 12]
Large
col-lg-[1 to 12]
Extra large
col-xl-[1 to 12]
Try this:
<section class="section">
<div class="container-fluid">
<div class="aboutBanner"> </div>
<div class="row">
<div class="col-md-4 col-sm-6">
content of first
</div>
<div class="col-md-4 col-sm-6">
content of second
</div>
<div class="col-md-4 col-sm-12">
content of third
</div>
</div>
</div>
</section>
Keep in mind that 12 is 100%, 6 is 50%, 4 is 33%, 3 is 25% and so on...