Boostap4 and @media queries not working together

Prior to adding the Bootsrap4 CDN, this snippet of html stacks perfectly according to the media query, but as soon as the Bootstrap4 CDN is introduced, the stacking effect goes away.

What, exactly, is it about Bootstrap4 that cancels out this stacking effect and if there is a way to some how override this effect without actually removing the CDN, what would you suggest it be?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
#about {
  color: #32CD32;
  padding-top:50px;
  background-color: black;
}
#about img {
    max-width: 100%;
    height: auto;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media (max-width: 768px) {
    /* For mobile phones: */
    .col-6{width:100%}
    [class*="col-"] {
        width: 100%;
    }
}
</style>

</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>
<div class='container-fluid'>
<div class="row">

<div class="col-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-6">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 right">
  <div class="aside">
    <h2>What?</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Where?</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>How?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
  </div>
</div>
</div>
 </div>


</body>
</html>

Solution

That is because Bootstrap 4 is using flexbox (flex-basis and max-width) to style the layout while you are changing the width. So when you change the width, it has no effect because there's already a max-width applied to the element that has not been altered.

What you need to do instead of changing the width to 100% for mobile is to change the max-width to 100% AND the flex-basis property to 100%.

So this will work.

[class*="col-"] {
    max-width: 100%;
  flex-basis: 100%
}