How can I achieve the desired floats in Bootstrap?

I am trying to build a page using bootstrap. I want to create a layout that I see on a lot of marketing pages something like this:

I am currently setting the float and margins manually and getting some wonky results. The text doesn't flow around the image as the page resizes and doesn't maintain its vertical position in alignment as the window changes. Lastly, when the page is resized/ if a mobile user accesses the page, it should respond as follows:

• Image
• Paragraph
• Horizontal Rule
• Image
• Paragraph
• Horizontal Rule
• Etc...

Instead, with my current HTML, I am getting the following on mobile:

• Image
• Paragraph
• Horizontal Rule
• Paragraph
• Image
• Horizontal Rule
• Etc...

Here's the code I have so far:

<!-- language: lang-html -->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <img class="do-icon-left img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
    </div>
    <div class="clearfix"></div>
    <hr>
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <p class="do-feature-left">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
      <img class="do-icon-right img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
    </div>
  </div>
</div>

<!-- language: lang-css -->

.do-icon-left {
  float:left;
  margin-right: 100px;
  width:287px;
}
p.do-feature {
  margin-top:120px;
}
p.do-feature-left {
  float: left;
  margin-right: 100px;
  width:350px;
}
.do-icon-right {
  width: 287px;
  float:right;
}

Here's a demo in jsFiddle

How can I build this properly using Bootstrap classes to facilitate?

However you arrange the items in the DOM is how they will appear in the mobile view. So if you want the picture to come first, you need to place the picture first. Then, on wider screens push or pull the images to the side.

To do that, you'll want to look into column ordering with col-*-push-* and col-*-pull-*

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #278382;
}

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2 col-md-push-10">
      <div class="circle"></div>
    </div>
    <div class="col-md-10 col-md-pull-2">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

  </div>
</div>

<!-- end snippet -->