Responsive CSS - How to bring a li item to the bottom and in desktop have the li item on the top

Question

I have a li item and then a div which follows after it. Inside this div its like a hr tag, just a line with contents to separate. This is the desktop version.

When viewing in mobile version, I want to bring this li item below the div. I tried with margin-top, the li item moves, but the div also move along with it, to further down. How to achieve this ?

<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>

Answer 1

You could try reversing the order of the outer container with flexbox.

<ul class="container">
  <li>list item</li>
  <div>some content</div>
</ul>

.container{
  display: flex;
  flex-direction: column-reverse;
}