如何解决响应式CSS-如何将li项放到底部,而在桌面中将li项放到顶部
我有一个li项目,然后有一个div,紧随其后。在此div内,它像hr标签,只是一行内容分开。这是台式机版本。
在移动版本中查看时,我想将此li项目带到div下面。 我尝试使用margin-top,li项移动,但是div也随之移动,进一步下降。 如何实现呢?
<li class="ser" s><a href="javascript:void(0);" title="" alt="" ><img src="/con.svg">
</li>
<div class="hbar row row-no-gutters">
<div class="col-sm-4 visible-tablet visible-desktop"> Content1
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content2
</div>
<div class="col-sm-4 visible-tablet visible-desktop"> Content3
</div>
</div>
解决方法
您可以尝试使用 flexbox 反转外部容器的顺序。
<ul class="container">
<li>list item</li>
<div>some content</div>
</ul>
.container{
display: flex;
flex-direction: column-reverse;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。