使用Bootstrap 3流体网格“旋转”布局

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 (ie 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.