title: boostrap grid - 1 column in desktop and 2 in mobile
body: <p>I want it to be like this
  <a href="https://i.stack.imgur.com/j0VSK.png" rel="nofollow noreferrer">design</a>
  Thanks for the help</p>
  
  <p>this is my code, I've tried it in fiddle and it's working but I wanted to be sure that it's the correct way to do it.</p>
  
  <pre><code>    &lt;div class="row"&gt;
              &lt;div class=" col-md-12 col-sm-6 col-xs-6"&gt;IMAGE &lt;/div&gt;
              &lt;div class=" col-md-12 col-sm-6 col-xs-6"&gt;TEXT &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>