Как в bootstrap правильно расположить блоки(колонки) чтобы в мобильной версии они не накладывались друг на друга?

Question

Sadyg Babaev @progMatika

Изучаю веб разработку.

Как в bootstrap правильно расположить блоки(колонки) чтобы в мобильной версии они не накладывались друг на друга?

Верстаю макет сайта с помощью bootstrap. Есть несколько блоков. В десктопной версии все ок, но в мобильной нет. Проблема с 2 блоками. Один "съедает" часть другого, т.е нижний блок закрывает нижнюю часть верхнегоюВ коде они идут друг за другом. Оба блока вместе с другими блоками находятся внутри одого большого родительского блока div с классом row.

<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>