How do you indent in responsive component layout?

Question

css

Good day everyone.
I have long wanted to learn how to properly indent layout using BEM or any other component methodology.
For example, let's take the simplest landing element. For example "pros of the product".

1. We make a component. (pseudocode)

.Плюс
  .Плюс__иконка
  .Плюс__заголовок
  .Плюс__описание

2. Create a section, grid and add 4 such elements

.секция секция--наши_плюсы
  .ряд
    .ряд_конка.ряд_конка--4
      .Плюс
        .Плюс__иконка
        .Плюс__заголовок
        .Плюс__описание
     .ряд_конка.ряд_конка--4
      .Плюс
        .Плюс__иконка
        .Плюс__заголовок
        .Плюс__описание
и т.д.

So far so good.
Problems begin when you need to make an adaptive. Between the "pluses" should appear vertical indents.

Of course, you can give this component an indent in the media for the mobile screen.
But then what to do with the last "plus" for which this indent will be superfluous.
And what if there are two of them in a row, then it will be necessary to remove the indent at the bottom of the last two.
And in general, I want to leave the component independent and not shove indents into it.
And there are many such problems. Let's take typical landings.
1. Section headings do not always have the same indent at the bottom.
2. The sections themselves have different indents
3. Call to action buttons, sometimes higher, sometimes lower
, and so on.
PS I understand how the components themselves are made and perfectly understand how adaptive grids (bootstrap, etc.) work. And if anyone had projects on BEM or other methodology, share the reference.
Thank you.

Answer 1

Problems begin when you need to make an adaptive. Between the "pluses" should appear vertical indents.

I just made a grid element grid__gap that blends into a column for certain sizes.

<div class="grid page__layout">
  <div class="grid__row">
    <div class="grid__col grid__col--xs-12">...</div>
    <div class="grid__col grid__col--xs-12 grid__gap-xs">...</div> // Колонка с оступом для xs
  </div>
</div>

As for the indents of headings and sections, in general, they are the same for a normal designer, at least typical sections for sure, for the rest you can make a modifier or, if the section is very custom, mix a separate block.

Answer 2

here https://jsfiddle.net/kzf3o6sf/4/
Flexbox this solves everything here is the link

Answer 3

I always do this

.elem + .elem {
   margin-top: 20px;
}