How to correctly position blocks (columns) in bootstrap so that they do not overlap each other in the mobile version?

Question

css

I'm designing a website layout using bootstrap. There are several blocks. On desktop it's ok, but on mobile it's not. Problem with 2 blocks. One "eats" part of the other, i.e. the lower block covers the lower part of the upper one. In the code, they go one after another. Both blocks, along with other blocks, are inside one large parent div block with the row class.

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="media-block-wrapper" id="warea-2">
<h2 class="section-head">
<a href="#">Наши авторы</a>
</h2>
    <div class="row" id="m-block-1">
      <ul>
        <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4" id="mblock">
          <div class="media-block horizontal width-img size-4" id="block-m">
            <a href="#" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
              <div class="thumb listThumb thumb16_9">
                <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
              </div>
            </a>
            <div class="content" id="auth-text">
              <a href="sample_link.html">
                <h4>
                <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                </h4>
              </a>
            </div>
          </div>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4" id="mblock2">
           <div class="media-block horizontal width-img size-4" id="block-m2">
            <a href="#" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
              <div class="thumb listThumb thumb16_9">
                <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
              </div>
            </a>
            <div class="content" id="auth-text2">
              <a href="#">
                <h4>
                <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                </h4>
              </a>
            </div>
          </div>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4" id="mblock3">
           <div class="media-block horizontal width-img size-4" id="block-m3">
            <a href="#" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
              <div class="thumb listThumb thumb16_9">
                <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
              </div>
            </a>
            <div class="content" id="auth-text3">
              <a href="#">
                <h4>
                <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                </h4>
              </a>
            </div>
          </div>
        </li>
        </ul>
        </div>
        </div>
      </div>

      
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-push-2" id="politics">
          <div class="media-block-wrapper" id="warea-3">
        <h2 class="section-head">
        <a href="sample_link.html">Samle</a>
        </h2>
            <div class="row" id="m-block2">
              <ul>
                <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                  <div class="media-block horizontal width-img size-4">
                    <a href="sample_link.html" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
                      <div class="thumb listThumb thumb16_9">
                        <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
                      </div>
                    </a>
                    <div class="content">
                      <a href="sample_link.html">
                        <h4>
                        <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                        </h4>
                      </a>
                    </div>
                  </div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                   <div class="media-block horizontal width-img size-4">
                    <a href="sample_link.html" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
                      <div class="thumb listThumb thumb16_9">
                        <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
                      </div>
                    </a>
                    <div class="content">
                      <a href="sample_link.html">
                        <h4>
                        <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                        </h4>
                      </a>
                    </div>
                  </div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                   <div class="media-block horizontal width-img size-4">
                    <a href="sample_link.html" class="img-wrapper" title="Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!">
                      <div class="thumb listThumb thumb16_9">
                        <img src="images/first.jpg" class="enhanced" alt="Мы лучшие!" height="100" width="150">
                      </div>
                    </a>
                    <div class="content">
                      <a href="sample_link.html">
                        <h4>
                        <span>Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</span>
                        </h4>
                      </a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
        </div>
      </div>

Answer 1

And what prevents mobile ask?
.col-xs-12, .col-sm-6 {margin-bottom:15px;}