Как сделать текст переносимым вокруг следующего плавающего элемента?

Нет простого способа добиться обоих результатов, используя только CSS, не изменяя разметку. Однако есть несколько приемов, которые вы можете использовать, чтобы попытаться подражать желаемому поведению.

Прием 1. Используйте абсолютное позиционирование

Установите ссылку на position:absolute;top:0;right:0; (и контейнер на position:relative;, если необходимо). Затем используйте .text::before{display":block;content' ';float:right;}, чтобы поместить пробел, где появится ссылка для печати.

Прием 2: двойные ссылки

Вы можете поместить ссылку перед/в <h2>, чтобы плавать справа на больших дисплеях, затем скрыть ее и показать (ранее скрытую) вторую ссылку в виде блочного элемента под текстом на маленьких дисплеях.

Благодаря приведенным выше предложениям я, наконец, решил сломать структуру чистой семантики и поместить элемент .action перед .text, чтобы он легко плавал с правильным переносом текста. Добавить поведение, желаемое для меньшего экрана, было довольно просто с ограничениями на размер элемента .action:

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

Другим решением было бы то, что предложил @cimmanon: cssdeck.com/labs/9bntxaro