ブートストラップ - 並べ替えの列

Question

私はブートストラップで作業しており、列の順序をsmビューでのみ変更したいと考えています。私はブートストラップにプルとプッシュ方法があることを知っていますが、私はこれに問題があります。

デスクトップ

A | B | C | D

タブレット

A | D

B | C

モバイル

A | B

C | Dは今

マイコード：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3">A</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">B</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">C</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">D</div> 
</div> 
</div> 

Answer 1

Krystianは、ブートストラップの引っ張り、プッシュ方法は、水平方向の列を交換するために使用さではなく垂直にされます。それらを垂直に入れ替えたいので、これを達成するにはCSSを使う必要があります。

同様の質問があり、this linkがあなたの要件を満たすのに役立つことを願っています。

Answer 2

ヘマントさんありがとうございますが、私はより良い解決策を見つけました。フレックスの使用。

あり、私はプッシュを試してみて、引っ張る前に私の作業例:)

.row > div { 
 
    border:solid 1px gray; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    #col-a { 
 
    order:1; 
 
    } 
 
    #col-b { 
 
    order:3; 
 
    } 
 
    #col-c { 
 
    order:2; 
 
    } 
 
    #col-d { 
 
    order:4; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div> 
 
    </div> 
 
</div>