How to make text wrapable around following, floated element? - html

Question

HTML:
<div class="heading">
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a class="action" href="#">Print</a>
</div>
Desired default look:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur adipiscing elit. |
Desired look on small screen (using media-queries):
| Lorem ipsum dolor sit |
| amet, consectetur |
| adipiscing elit. |
| [Print] |
Not desired:
| [Print] |
| Lorem ipsum dolor sit amet, |
| consectetur adipiscing elit. |
Not desired:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur |
| adipiscing elit. |
Remarks:
Text may be any long.
Action element is constant height and variable width.
I see no way to do this using only CSS.
Right now I use JS (Harvey lib) to put floated DOM element before text on bigger screen.
Any ideas?
/// EDIT - moved to answer (sorry for mess)

Answer 1

There's no easy way to achieve both results using only CSS without modifying your markup. There are a few tricks you can use to try to emulate the behavior you want, though.
Trick 1: Use Absolute Positioning
Set the link to position:absolute;top:0;right:0; (and the container to position:relative; if needed). Then, use .text::before{display":block;content' ';float:right;} to place a gap where the print link will appear.
Trick 2: Double Links
You could place a link before/in the <h2> to float right for large displays, then hide it and show a (formerly-hidden) second link as a block element below the text on small displays.

Answer 2

Thanks to suggestions above, I finally decided to break pure semantics structure and put .action element before .text, so it floats easily with proper text wrapping. Adding the behavior desired for smaller screen was quite easy with the constrains about .action element size:
cssdeck.com/labs/epcoxk7o
HTML:
<div class="heading">
<a class="action" href="#">Print</a>
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
CSS:
.action {
float: right;
line-height: 20px;
padding: 5px 70px;
background: #eee;
}
.text {
line-height: 30px;
}
#media (max-width: 30em) {
.heading {
position: relative;
padding-bottom: 20px;
}
.action {
position: absolute;
bottom: 0;
left: 0;
}
}
Other solution would be what #cimmanon suggested: cssdeck.com/labs/9bntxaro