Bootstrap 3 Grid: move items between lines

Question

While learning Twitter Bootstrap 3 to create responsive web pages, I had a problem:
How do I move an item from one line to another?
I need something like col-md-push / col-md-pull, but for the vertical direction.

For example, on the desktop screen, element D is on the second line, but on the tablet it should be the first:

Desktop:
| A | B | C |
| D | E | F |

Tablet:
| A | D |
| B | C |
| E | F |

Phone:
| A |
| D |
| B |
| E |
| C |
| F |

Thanks in advance!

Answer 1

, . A D . (col-md) 12 , D A. (col-sm) A D (6), .

: http://jsfiddle.net/UNs25/1/

<div class="container">
    <div class="row">       

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="A">
                </div>
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="D">
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="B">
            <input type="text" class="form-control" placeholder="E">            
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="C">
            <input type="text" class="form-control" placeholder="F">            
        </div>      

    </div>      
</div>