Correct way to override styles for BEM blocks?

Question

css

I have two blocks, they are very similar to each other, only on the mobile version one block should be with elements in one column, and the other block in two columns. Am I correct to modify these blocks with such markup according to the bam name:

Initially, the block has the following markup:

<div class="tools">
                    <div class="tools__item">
                        <div class="tools__icon">
                            <img src="img/tools-1.svg" alt="">
                        </div>
                        <div class="tools__name">Конкурентная среда</div>
                    </div>
                    <div class="tools__item">
                        <div class="tools__icon">
                        <img src="img/tools-2.svg" alt="">
                        </div>
                        <div class="tools__name">Качество сайта</div>
                    </div>
                    <div class="tools__item">
                        <div class="tools__icon">
                        <img src="img/tools-3.svg" alt="">
                        </div>
                        <div class="tools__name">Разработка стратегии</div>
                    </div>
                  </div>

I redefine the second block like this:

<div class="tools tools--two-columns">
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-1.png" alt="">
                </div>
                <div class="tools__name">Естественная выдача</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-5.svg" alt="">
                </div>
                <div class="tools__name">Целевой трафик</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-2.png" alt="">
                </div>
                <div class="tools__name">Доверие пользователей</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-2.svg" alt="">
                </div>
                <div class="tools__name">Качество сайта</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-3.svg" alt="">
                </div>
                <div class="tools__name">Высокая конверсия</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-3.png" alt="">
                </div>
                <div class="tools__name">Долговременный результат</div>
              </div>
            </div>

Is my choice correct or not?