I am attempting to create a 2 column layout using bootstrap where in each row there are 2 columns : 

One contains Text and one contains images adding to the explanation of the text 

This is the bootstrap code : 

This is the navigation bar.

```
  <div class = "navbar navbar-default navbar-static-top">

   <div class = "container ">

    <a href = "# " class  = "navbar-brand">levi</a>
          <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse"
           name = "button" >
          <span class = "navbar-toggle-Menu">Menu</span>
          </button>
    <div class = "collapse navbar-collapse ">

           <ul class = "nav navbar-nav navbar-right ">

                    <li><a href="#"> product</a></li>
                    <li><a href="#"> price</a></li>
                      <li><a href = "#">Support</a></li>
                    <li><a href = "#">Sign In</a></li>
           </ul>

    </div>

   </div>

  </div>

```

This is the 2 column layout for each row

```
<div class = "container">

        <div class = "row">

          <div class = "col-sm-6 col-md-6 col-lg-8">
                  <h3><b>Connect Soft documents</b></h3>
                  <p class = "lead">Allow documents that feed into each other to provide a consistent, untainted view of the
                financial, operational and social behaviour of the institution.</p>
          </div>

          <div class = "col-sm-3">
  Image

          </div>

        </div>

        <div class = "row">
<!-- position image to the right when on desktop,, but allow image to occupy the whole  webpage  when the device is less the 768px-->
          <div class = "col-sm-5">
  <h3><b>Improve decision models</b></h3>
  <p class = "lead">Use statistical modelling to identify patterns and anomalies in the data that can help in
  making better decisions.</p>
          </div>
          <div class = "col-sm-6">
           <img src = "Statistics.png" alt = "Statistics" width = "350px" height = "270px"  class = "pull-right img-responsive imG">
          </div>

        </div>

        <div class = "row">

          <div class = "col-sm-6">
              <h3><b>Search. Get what is important to You!</b></h3>
              <p class = "lead">All notifications and documents are indexed and
              archived so that you can find what is needed at all times.</p>
          </div>
          <div class = "col-sm-6">

          </div>

        </div>

        <div class = "row">

          <div class = "col-sm-4">
            <h3>Collaborate with other apps!</h3>
              <p class = "lead" >Connect to the tools you need to prevent wasting time using so many apps </p>
          <div class = "col-sm-8">
<img src = "Integrate.jpg" alt = "Integrate" width = "300" height = "300" >
          </div>

        </div>

</div>
<footer>

<div class = "">
<ul>
  <li>Security</li>
</ul>
</div>
</footer>

```

How I want it to work is that when the page is being viewed on a desktop the text is aligned left and the image is aligned right. 

When it is being viewed on a screen on less than 768px, the text is above the image and the image is aligned in the center of the page. 

e.g.

Desktop : Text | Image 

Mobile : 

Text 

---

Image

Here is my jsfiddle [bootstrap website](https://jsfiddle.net/g8mzhehb/2/)

It should have the same responsive design as slacks product page 

[slack's product page](https://slack.com/is)