8 bootstrap tips: Tip 8-2

Tip 8, option 2: Float

by Rafael Ramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-4 pull-right-sm">
      <img class="center-block" src="https://placehold.it/100x100"/>
    </div>
    <div class="col-xs-12 col-sm-8 pull-right-sm">
      Content text, this text should be left of the iamge on desktop and below in mobile.
    </div>
  </div>
</div>

CSS

@media (min-width: 768px) {
 .pull-right-sm { float: right; } 
}

/* This styles are just to make it look nice, but not necessary */
.container-fluid {background-color: #eee;border: 1px solid #e1e1e8;border-radius: 5px;}
.row { padding: 5px; }
.col-sm-4 {background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);border-radius: 5px;padding: 5px;}