我如何使我的行响应，以便在移动设备上垂直移动？

Question

我正在尝试以一种行响应方式，使移动行垂直而不是水平移动，而我仍然拥有所有这些花哨的框，有人可以以任何方式帮助我吗？

我已经尝试过更改列，css-flexbox，但是我很可能只是在做一些可怕的错误。

#caixas {
  background-color: #58373791;
  padding-top: 5px;
  padding-right: 30px;
  padding-bottom: 5px;
  padding-left: 25px;
}

#caixas2 {
  background-color: #b6696a91;
  padding-top: 5px;
  padding-right: 30px;
  padding-left: 25px;
  padding-bottom: 5px;
}

#border {
  border: solid 3px red;
}

<div class='col-lg-12 col-md-12 col-sm-12'>
  <div id="border" class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-6 mb-4">
        <div id="caixas" class="container">
          <h3 class="h2sm" align="center">Estudante </h3>
          <h4 class="h1sm " align="center">Português</h4>
        </div>
        <div id="caixas2" class="container">
          <h3 class="h3sm" align="center">Portuguese Student</h3>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 mb-4">
        <div id="caixas" class="container">
          <h3 class="h2sm" align="center">Estudante </h3>
          <h4 class="h1sm " align="center">Internacional</h4>
        </div>
        <div id="caixas2" class="container">
          <h3 class="h3sm" align="center">Internacional Student</h3>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 mb-4">
        <div id="caixas" class="container">
          <h3 class="h2sm" align="center">Estudante </h3>
          <h4 class="h1sm " align="center">Intercâmbio</h4>
        </div>
        <div id="caixas2" class="container">
          <h3 class="h3sm" align="center">Exchange Student</h3>
        </div>
      </div>
    </div>
  </div>
</div>