Bootstrap responsive error

Question

I want my columns (the ones with a title that says 'Hello world') to have a space between them, but on computers they are placed next to each other instead of one below the other as in cell phone so if I put the left margin it doesn't look good on the phone and on computers it does, in short, in each screen size it has a margin between each one.
https://sololearn.com/compiler-playground/WQkdl89hqPGq/?ref=app

Answer 1

I think the reason is that all your "Hola mundo" panels are placed inside the same row element.
<div class="row">

If you don't want them to be placed next to each other, you should apply a different grid model.

https://www.educba.com/bootstrap-row/

Answer 2

add an mx-auto in each of your element if you want them at the center.

<div class="mx-auto col-sm-12 col-md-4 col-lg-4 siete mostras">

Answer 3

Let me explain better, I used mx-2 and my-2 on cell phones, the elements are placed on top of each other, making my-2 have an effect, but they still have mx-2, making them have a margin on the sides It deforms the figure and when they are on computers they collide side by side, making the MX-2 take effect, but I want the MX-2 to only take effect on large screens.