Interchange element position for smaller devices - bootstrap

Question

I want to interchange the position of two elements, for only sm devices.

It is currently like this:

 ----------------- -----------------
|        Text        |        Button        |
 ----------------- -----------------

I want it to be like this:

 ----------------- 
|        Button        |
 -----------------
|        Text        |
 -----------------

In the FIDDLE, the Know the status text should be below Save button for sm devices.

FIDDLE HERE

Answer 1

You need the column ordering functionality of Bootstrap:

http://getbootstrap.com/css/#grid-column-ordering

Here's a pen to show you an example of how this would work:

http://codepen.io/anon/pen/QyNGWL

Notice how the order of the elements is TEST 1 and then TEST 2 when side by side. As the breakpoints of the viewport get smaller they switch places and then, as you requested, the TEST 2 element is stacked above the TEST 1 element when at smallest breakpoint.