You set a width of 30% to the ul which means that the text wraps when that width is no longer wide enough to contain the content. It has nothing to do with the float to the side.
Remove the float and width from the ul and just apply a margin-left to the right floated image instead (around 30px or whatever).
Then add a media query at smaller screen sizes to remove the float from the image and centre it instead.
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
.fr {
float:right;
margin:0 0 20px 10px;
}
.wrapper {
overflow:hidden
}
@media screen and (max-width:460px) {
.fr {
float:none;
display:block;
margin:10px auto;
}
}
</style>
</head>
<body>
<div class="wrapper"> <img class="fr"src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="233">
<ul>
<li>
<h1>ab cde ghi jkl mno pqrst abcde fghu ghgjk </h1>
</li>
<li>
<h1>kl mnopqr stuv</h1>
</li>
<li>
<h1>xyza bc de fghi kln</h1>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</body>
</html>
(Note that you should really only use one h1 per page and it is unlikely that an h1 in the middle of a list is very semantic anyway 
)