Pretty straight forward: One row with two columns. Each column has a h1 header, an image, and a div with a subtitle and unordered list. The two columns should have a thin space between them

my_stuff.html

<div class="row" id="x-based-row">
  <div class="col-md-6">
    <div class="col-md-12"> <!-- inner column with length 12 -->
      <h1>Foo</h1>

      <div class="center">
        <%= image_tag('an_image.png') %>
      </div>

      <div class="info-box">
        <p>
          <strong>
            Something strong!
          </strong>
        </p>

        <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
          <li>List 4</li>
          <li>List 5</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="col-md-12"> <!-- inner column with length 12 -->
      <h1>Bar</h1>
      <div class="center">
        <%= image_tag('another_image.png') %>
      </div>

      <div class="info-box">
        <p>
          <strong>Something Strong</strong>
        </p>

        <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
          <li>List 4</li>
          <li>List 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>