How can I add flexbox on my Wordpress Site - html

Question

Hey guys I am trying to apply flexbox on my wordpress site.
Based on what I know Flexbox is a shorthand of "Flexible Box Layout Module", which is a CSS3 module, standardized by the World Wide Web Consortium.
So I don't have to install anything, compliant browsers support it natively but for some reason it won't work on my site: http://americanbitcoinacademy.com/course-list/
Currently I am using flex on my codes:
<div class="flex">
<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<button class="btn btn-block btn-primary">PURCHASE COURSE →</button>
</div>
</div>
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 2.5%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
width: 100%;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
p{
line-height: 16px;
margin: 10px auto;
}
h4 {
margin: 0 0 20px 0;
}
}
.btn-block {
display: block;
width: 100%;
margin-top: 22px;
background: #DD374D;
}
button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
.flex {
display: flex;
flex-wrap: wrap;
}
Which will do the trick to have equal size of the boxes NO MATTER HOW LONG IS THE CONTENT on that page by default.
Any idea why does the flexbox doesnt work?
Thank you in advance.

Answer 1

Your code works. You are probably not testing in a flex box capable browser:
http://caniuse.com/#search=flexbox
To align buttons to bottom:
.col-1-3 {
position: relative;
padding-bottom: 40px; /* offset height of button */
}
button.btn-block{
position: absolute;
bottom: 0px;
width: calc(100% - 20px);
}