Верстаю макет сайта с помощью 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>
