"Pivoting" a layout with Bootstrap 3 fluid grid - html

Question

I'm just starting with Bootstrap 3 and struggling to find a fluid (responsive) solution for the required grid.
Simplified it should look like the following
for desktop and tablets:
------------+---------------+-----------
Label 1.1 Label 2.1 Label 3.1
Label 1.2 Label 2.2 Label 3.2
for phones:
----------+----------
Label 3.1 Label 3.2
Label 2.1 Label 2.2
Label 1.1 Label 1.2
As you can see the components need to be stacked in 3 columns on a larger screens while forming 3 lines with 2 columns each on smaller ones.
I unsuccessfully tried three blocks with a pair of components in each like the one below. They are all wrapped into a container and a row.
<div class="col-md-4 ">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-6">
<label>Label 1.1</label.1>
<label>Label 2.1</label>
</div>
</div>
I also tried to splitting each label into it's own <div class="col-sm-6"> and it didn't work for me as well.
On top of it (as you can see), the order needs to be reversed vertically. I was thinking about push and pull but they work horizontally.
Is it even possible with pure Bootstrap (no custom CSS). Am I missing something basic here? Please point me into the right direction.
EDIT: (03/26/2014)
I believe that I found a solution to a reverse ordering. Create sm layout with the appropriate order and then use push and pull to swap 1st and 3rd fields in each row in a horizontal layout on md and lg devices.
Still not sure how to achieve the desired layouts organically (i.e. without field duplication with visible and hidden classes).

Answer 1

Assuming I didn't miss anything, this matches your two layouts specified:
<div class='row'>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>3.1</div>
<div class='col-xs-6 col-sm-12'>3.2</div>
</div>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>2.1</div>
<div class='col-xs-6 col-sm-12'>2.2</div>
</div>
<div class='col-xs-12 col-sm-4 pull-right'>
<div class='col-xs-6 col-sm-12'>1.1</div>
<div class='col-xs-6 col-sm-12'>1.2</div>
</div>
</div>
As you can see, you use the pull-right to make the top pull to the right, which essentially reverses the order when stacked.