CSS не работает на страницах меньшего размера, используя @media

Question

У меня есть сайт, который я создал с помощью начальной загрузки и CSS. У меня есть список, который находится сбоку на экране обычного размера (компьютер / ноутбук). Когда экран уменьшен до уровня мобильных устройств менее 500 пикселей, я хочу, чтобы список был перенесен на нижняя часть страницы.

Я использовал класс bootstrap hidden-md-down, чтобы удалить некоторые элементы div при свертывании страницы, которые прекрасно работают.

Вот пример на CodePen https://codepen.io/anon/pen/qwZxbm Нижняя фотография исчезает, так как я использую класс начальной загрузки, чтобы удалить ее на экранах меньшего размера. Список должен опуститься до самого конца страницы, поскольку это не так.

фрагмент боковой панели на странице

    <div class="row">
                <!-- Sidebar -->
                <div class="col-sm-4">
                    <div class="sidebar">


                        <div class="sidebar-section">
                            <h5><span>Post</span></h5>
    <a href="#"><img src="#" title="new" alt=" photo"></a>
                        </div>


<div class="hiddenmobile">
                        <div class="sidebar-section">
                            <h5><span>Latest Blog Posts</span></h5>
                            <?php foreach($posts as $posts):{ ?>
                            <ul style="list-none;">
                                <li><strong><a style="color:lightgreen;" target="_blank" href="<?php echo site_url('/Blog/'.$post['slug']);?>"><?php echo $post['title']; ?></a></strong></li>
                            </ul>
                            <?php }endforeach; ?>
                        </div>
</div>


                        <div class="sidebar-section hidden-md-down">
                            <h5><span>Photo</span></h5>
    <a href="#"><img src="#" title="new Gift Ideas" alt="photo"></a>
                        </div>
                    </div>
                </div>

CSS @media - это то, что, похоже, не работает, так как должно сбрасывать div скрытый мобильный телефон внизу страницы

@media(max-width: 575px) {
  .hiddenmobile{
    display: flex!important;
    flex-direction: column-reverse!important;
  }
}

Answer 1

Чтобы ваше медиа-выражение работало правильно, вам нужно исправить это:

@media screen and (max-width: 575px)

UPD: но для того, чтобы блок переместился на дно с определенным разрешением, в вашем случае есть одна из многих опций:

.sidebar {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 575px) {
  /* it is better to replace this class with one that clearly fits your block */
  .hiddenmobile { 
    order: 1;
  }
}

Таким образом, используя свойство order, вы устанавливаете позицию нужного вам блока. Если другие блоки не имеют этого свойства, соответствующий блок переходит в нижнюю часть.