Possible to make a list item appear first via css? - css

Question

I have a jquery mobile listview, and I'd like to make one of the li items appear first in the list via css without moving the li item in the code. I don't want the li item to be in a fixed position (in other words, I do want it to scroll with the list). I just want it to appear as though it were the first li item.
Here is the code for the list (just 2 li items). So I'm wondering how I could style the second li to appear first.
<div data-role="page" data-theme="c">
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
<a href="http://domain.com/1XyK?id=1117448578">
<img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
<h2>Healthy Weight Loss</h2>
<p>Now includes Mindful Eating!</p>
<span class="ui-li-count">NEW</span>
</a>
</li>
<li>
<a href="http://domain.com?id=977040364">
<img src="https://domain.com/moreicon/EN/bundle-top10.png" />
<h2>Our Top 10 Apps!</h2>
<p>Save BIG on our chart toppers!</p>
<span class="ui-li-count">SAVE</span>
</a>
</li>
Is that possible?

Answer 1

One possibility, if your browser support allows for it, is Flexbox. This allows you to control the order of elements by using the order property on the child.
For example, if your HTML is:
<ul>
<li>First</li>
<li>Second</li>
</ul>
Then, you can style the UL as a columnar flexbox in CSS:
ul {
display: flex;
flex-direction: column;
}
And you can assign a negative order to the child you want to bring to the top:
ul li:nth-of-type(2) {
order: -1;
}
Working example: http://codepen.io/honzie/pen/oLxENz