On my blog, I wanted large-screened devices to have the content flanked by a perma-link (on the left) and a publication date (on the right), but on iPhone I wanted to pull those into the main flow to prevent zoom-out

flank.css

/* Flanking visual elements */

.permalink {
  font-size: 35px;
  position: absolute;
  display: inline-block;
  left: -45px;
  top: -2px;
  vertical-align: middle;
}

.date {
  font-size: 16px;
  text-align: right;
  line-height: 1.3;
  font-weight: bold;
  min-width: 100px;
  color: #808080;
  position:absolute;
  left: 100%;
  top: 5px;
}

/* iPhone-specific adjustments
    basically, we want to pull the flanking
      visual elements back into the main narrow
      flow
*/
@media screen and (max-device-width: 480px) {
  .date {
    position: static;
    text-align: right;
  }

  .permalink {
    position: static;
  }
}