Flexbox nos cards Bootstrap 4

Question

I’m trying to show two cards even on smaller screens, however when it comes under 576px it seems to flout the lower rules and displays only one card per line. What am I doing wrong?

I have the following code:

@media (min-width: 0) {
  .card-deck .card {
    flex: 0 0 calc(100% - 10px);
  }
}
@media (min-width: 276px) {
  .card-deck .card {
    flex: 0 0 calc(50% - 10px);
  }
}
@media (min-width: 768px) {
  .card-deck .card {
    flex: 0 0 calc(33.3333333333% - 10px);
  }
}
@media (min-width: 992px) {
  .card-deck .card {
    flex: 0 0 calc(25% - 10px);
  }
}
@media (min-width: 1200px) {
  .card-deck .card {
    flex: 0 0 calc(20% - 10px);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="card-deck">
  <div class="card">TEST 1</div>
  <div class="card">TEST 2</div>
  <div class="card">TEST 3</div>
  <div class="card">TEST 4</div>
  <div class="card">TEST 5</div>
</div>

https://codepen.io/anon/pen/KjjQmP

Answer 1

I solved the problem! It was in the flex-Direction property defined in bootatrap. I replaced it that way:

.card-deck{
    flex-wrap: wrap;
    flex-direction: unset;
}