Question

我有一个使用引导程序和CSS创建的网站，我的列表位于普通大小的屏幕（计算机/笔记本电脑）的侧面，当屏幕缩小到移动尺寸小于500px时，我希望该列表放到页面底部。

我使用了bootstrap类hidden-md-down来删除页面折叠中的一些div，这些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属性，可以设置所需块的位置。如果其他块不具有此属性，则相应的块将移至底部。

CSS无法在使用@media的较小页面尺寸上工作

1 个答案: