<section>
  <div class="container-fluid">
    <div class="row ">
      <div class="col-sm-6">
        <div class="img-holder">
          <img src="http://www.unsplash.it/1200/400" />
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <article class="post">
              <h2 class="post__title">Columned Text Right</h2>
              <div class="post__content">
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
              </div>
              <a href="" title="" class="btn btn-read">Lire</a>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-color">
  <div class="container-fluid">
    <div class="row row-odd ">
      <div class="col-sm-6 col-sm-push-6">
        <div class="img-holder">
          <img src="http://www.unsplash.it/1200/800/?image=315" />
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-sm-pull-6">
            <article class="post">
              <h2 class="post__title">Columned Text left</h2>
              <div class="post__content">
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
              </div>
              <a href="" title="" class="btn btn-read">Lire</a>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container-fluid">
    <div class="row ">
      <div class="col-sm-6">
        <div class="img-holder">
          <img src="http://www.unsplash.it/1200/800?image=600" />
        </div>
      </div>
      <div class="container" style="position:relative;display:block;">
        <div class="row">
          <div class="col-dressed">
            <article class="post">
              <h2 class="post__title">Floating Text Right</h2>
              <div class="post__content">
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
                <p>Ihilland erferspe poriatia volenet mi, sed eum que eossit por sitia poreictus ex eatur, si dusandam, sed modit quodisciis audi te re eumque raecti velitas endit que nulpa. Laccumendae quiaturia dolorum endelique maximaiost vent reptatius,
                  sitatec voluptame.</p>
              </div>
              <a href="" title="" class="btn btn-read">Lire</a>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
.section-color{background:#f0f0f0;}

.container-fluid{margin:0;
  > .row > [class*="col-"] {padding:0;}
  }

img{max-width:100%;margin-right:10px;display:block;}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.