CSS how to get the: a img on top, insted of the first a href "<a></a><a><img></a>"without floating

Question 1

I found another way of doing this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {list-style: none; margin: 0; padding: 0;}
li {position: relative; overflow: hidden;}
a {display: block;}
a:first-child {display: table-footer-group;}
a:nth-child(2) {display: table-header-group;}
a img{width:100%;}
</style>
</head>
<body>

<ul>
  <li>
     <a href="url">headline</a>
     <a href="url"><img class="thumbnail" alt="" src="http://placehold.it/200X200"></a>
     some text here...
     <a href="url">read more about this article</a>
  </li>
</ul>

</body>
</html>

Question 2

You could do something like this (following the lines of what user3008011 said above): http://codepen.io/pageaffairs/pen/Lzwxc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {list-style: none; margin: 0; padding: 0;}
li {position: relative; overflow: hidden;}
a {display: block;}
a:first-child {margin-top: 210px;}
a:nth-child(2) {position: absolute; top: 0;}
</style>
</head>
<body>

<ul>
    <li>
        <a href="url">headline</a>
        <a href="url"><img class="thumbnail" alt="" src="http://placehold.it/200X200"></a>
        some text here...
        <a href="url">read more about this article</a>
    </li>
</ul>

</body>
</html>