Почему не скрывается блок в bootstrap (hidden-md hidden-lg)?

Question

[ligisayan]

Всем привет! Есть блок с 4 элементами в сетке bootstrap которые отличаются по содержанию, а значит и по высоте. Фидл

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="section-content">
            <div class="row">
                <div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
                    <div class="feature-media">
                        <img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
                    </div>
                    <h4>Текст</h4>
                    <div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been the industry's standard dummy</div>
                </div>
				<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
                    <div class="feature-media">
                        <img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
                    </div>
                    <h4>Текст</h4>
                    <div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
                </div>
				<div class="clearfix hidden-md hidden-lg"></div>
				<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
                    <div class="feature-media">
                        <img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
                    </div>
                    <h4>Текст</h4>
                    <div class="feature-item-content">Lorem Ipsum is simply</div>
                </div>
				<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
                    <div class="feature-media">
                        <img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
                    </div>
                    <h4>Текст</h4>
                    <div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been</div>
                </div>
            </div>

Хочу добиться правильного отображения на всех разрешениях экранов, но элементы соскакивают на следующую строку с пустотами. Пробую исправить отображение с помощью
<div class="clearfix hidden-md hidden-lg"></div>
Но, блок почему-то не скрывается на экранах размеров md и lg В чем причина и как это исправить?

Answer 1

[iBird Rose]

у тебя на md не заданы стили для самих блоков.
https://jsfiddle.net/DTcHh/36574/
т.е. после lg у тебя сразу идет sm - в котором блоки по 2 в строке.

Comments

[ligisayan]

iBird Rose хм, я экспериментировал с добавлением col-md-3 и это не решало вопрос

<div class="feature-item col-sm-6 col-md-3 col-lg-3 wow slideInUp" style="visibility: visible;">

а почему же исключение класса col-lg-3 дало эфффект? очень интересно

<div class="feature-item col-sm-6 col-md-3 wow slideInUp" style="visibility: visible;">

[iBird Rose]

ligisayan: хоть добавление, хоть замена col-lg-3 на col-md-3 дало бы эффект.
т.е. ты поставил для lg экрана брекпоинт. а после у тебя сразу идет col-sm-6, тобишь на md экране у тебя сразу становится 2 колонки.
а теперь и для lg и для md - будет 4 колонки в строке. и только на sm станет 2
вот. тот же эффект https://jsfiddle.net/DTcHh/36575/

[ligisayan]

iBird Rose: не совсем
1 - stringershub.com/en/media/#features
2 - stringershub.com/ru/%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0...
разница только в наличии в блоках col-lg-3

[iBird Rose]

ligisayan: нет. ты сам ломаешь вот этим:

.feature-item.col-lg-3:nth-child(4n+1), .feature-item.col-lg-4:nth-child(3n+1), .feature-item.col-lg-6:nth-child(2n+1) {
    clear: left;
}

[ligisayan]

iBird Rose: а, это с темы стили применились. Спасибо!