响应式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;
}