How to offset the bootstrap 4 grid on tablets?

Question

Bootstrap

Hello, there is a website with a catalog,
on a PC there are 3 product cards in a row,
on mobile devices in a row, 1 product card (bootstrap adjusts them by itself).
On tablets, you need to make 2 rows of goods in a row, because at the moment the bootstrap is trying to fit all 3 cards, and it looks bad.
I re-read the bootstrap documentation, but I didn’t see how to do it, there was an option to do it by disabling the last product, but I didn’t like it, because in this case, significant products disappear.
Can you suggest how to implement this?
at the moment the code looks like this

<div class="row">
    <div class="col-md-4">
    Тут данные о товаре №1
    </div>

    <div class="col-md-4">
    Тут данные о товаре №2
    </div>

    <div class="col-md-4">
    Тут данные о товаре №3
    </div>
</div>

Addition:
I tried to add col-lg-4 col-md-6 col-sm-12 col-12 to each product, the
first 2 cards were in a row, but the 3rd card occupied the entire row,
screenshot prnt.sc/mr70l7 codepen.io
sandbox
/anon/pen/QojKYB

Answer 1

you divided the columns into rows. You need to shove all ".col" into one ".row", it will turn out something like this:

<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-12 col-12 mg">
    <div class="project_block"></div>
  </div>
</div>

Answer 2

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 col-12">
    Тут данные о товаре №1
    </div>

    <div class="col-lg-4 col-md-6 col-sm-12 col-12">
    Тут данные о товаре №2
    </div>

    <div class="col-lg-4 col-md-6 col-sm-12 col-12">
    Тут данные о товаре №3
    </div>
</div>