Bootstrap 3 ordering column into same row in responsive layout
<p>I' m developing a responsive layout but I have problems to sort columns.</p>

<p>I can´t sort columns within a single row.</p>

<pre><code>&lt;div class="row"&gt;
&lt;div class="well col-sm-8" style="background-color: red"&gt;IMAGE col-sm-8&lt;/div&gt;
&lt;div class="well col-sm-8 col-sm-push-4" style="background-color: antiquewhite"&gt;DESCRIPTION col-sm-8 col-sm-push-4&lt;/div&gt;
&lt;div class="well col-sm-4 col-sm-pull-8" style="background-color: aqua"&gt;PURCHASE col-sm-4 col-sm-pull-8&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>This code generates the following:</p>

<p><a href="https://i.stack.imgur.com/6tov5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6tov5.png" alt="enter image description here"></a></p>

<p>I need to move the <strong>PURCHASE</strong> section by the <strong>IMAGE</strong> SECTION in the same row.</p>

<p>I am trying with push/pull but this solution does not work in different rows.</p>

<p><a href="http://www.bootply.com/fAR1F9ULiO#" rel="nofollow noreferrer">Working Example</a></p>

<p><strong>UPDATE</strong></p>

<p>I am trying use Mobile first.</p>

<p>Mobile version  (is ok)</p>

<p><a href="https://i.stack.imgur.com/WDLy7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDLy7.png" alt="enter image description here"></a></p>

<p>Other devices:
<strong>I need organize columns without repeating code.</strong></p>

<p>In small,medium large devices I need show the following example:</p>

<p><a href="https://i.stack.imgur.com/tpI82.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tpI82.png" alt="enter image description here"></a></p>