Como eu faço para colocar os card em uma grid que no smartphone seja uma linha unica, um card por linha

Oi, Paulo, tudo bem?

Para colocar os cards em um grid de e fazer com que ele ocupe apenas uma linha em dispositivos móveis (smartphones), podemos utilizar os seletores de grid e breakpoints (pontos de quebra) do Bootstrap. Um exemplo pode ser observado no código abaixo.

<div class="row">
  <div class="col-12 col-sm-6 col-md-4">
    <div class="card">
      <div class="card-body">
        Conteúdo do Card 1
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4">
    <div class="card">
      <div class="card-body">
        Conteúdo do Card 2
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4">
    <div class="card">
      <div class="card-body">
        Conteúdo do Card 3
      </div>
    </div>
  </div>
</div>

Segundo a documentação do Bootstrap na <div> container, que engloba todos os cards, é colocada a classe row

Em cada uma das <div>que representam o conjunto das informações dos três cards é inserida o seletor col com suas especificidades. As colunas no Bootstrap são divididas em no máximo 12 e podem ser distribuídas seguindo as classes pré-estabelecidas na documentação. Os três seletores utilizados são:

• col-12para que os elementos ocupem as 12 colunas possíveis quando a tela tiver dimensões menores que 576px;
• col-sm-6 para que cada card ocupe 6 colunas em intervalos entre 576 px e 768px, posicionando os elementos em duas grandes colunas;
• col-md-4para fazer os elementos ocuparem 4 colunas cada em dimensões maiores que 768px;

Para saber mais sobre a documentação referente ao grid e aos breakpoints, recomendo a documentação do Bootstrap. As informações estão em inglês, mas você pode traduzir ao clicar com o botão direito do mouse e selecionar a opção "Traduzir para o português".

-Sistema de grid no Bootstrap -Sistema de breakpoints no Bootstrap

Lembre-se de realizar a instalação do Bootstrap. Essa instalação pode ser feita pelo método CDN, copiando o link de estilos na head do arquivo HTML e o link de javascript no final da tag body.

Link CSS do Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

Link JavaScript do Bootstartp:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!