Responsividade com quebra de

<h2>Nossas receitas ajudam você a aproeitar melhor os alimentos</h2> <Card> <button>Botão 1</button> <button>Botão 2</button> <button>Botão 3</button> <button>Botão 4</button> <button>Botão 5</button> <button>Botão 6</button> </Card> <br> <br>

Oi, Yara, tudo bem?

Eu utilizaria o sistema de Grid associado ao breakpoint, não sei se você está familiarizada, mas é simples

html:

   <Card>
            <div class="container-button">
                <button>Botão 1</button>
                <button>Botão 2</button>
                <button>Botão 3</button>
                <button>Botão 4</button>
                <button>Botão 5</button>
                <button>Botão 6</button>
            </div>
        </Card>

css:

@media screen and (max-width: 495px) {
    .container-button {
        display: grid;
        grid-template-columns: 100px 100px;
          }  
    }

Quando chegar num dispositivo com largura de um mobile, ele irá quebrar para 2 colunas, cada uma com 100px de largura, definido em grid-template-columns:

Aqui, nesse link, segue a documentação do bootstrap para grid responsivos: https://getbootstrap.com.br/docs/4.1/layout/grid/

Para saber mais sobre Grid Layout: https://developer.mozilla.org/pt-BR/docs/Web/CSS/grid

E nós também temos um curso de grid: https://www.alura.com.br/curso-online-css-grid-layout

Espero ter te ajudado!