Twitterのブートストラップ3でdiv col順序を変更する方法

Question

モバイルビューでTwitterブートストラップでdiv colのスタック順序を変更しようとしています。 col-md-7のテキストは、モバイルビューでcol-md-5のイメージの上に表示されるようにしたいが、デスクトップで表示する場合、div colは同じままである。

ここで私はここで

<div class="row featurette"> 
    <div class="col-md-5"> 
     <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
    </div> 
    <div class="col-md-7"> 
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
    </div> 
    </div> 

を使用していたコードは、私は以下のプッシュを使用してみてくださいとクラスを引っ張っ Bootly demo

Answer 1

これを行う1つの種類の方法は、モバイルを最初に考えることです。列をxs/smのためにどのように積み重ねるかを注文してから、プル＆プッシュを使用して大きな画面用に並べ替えます。このような何か作業をする必要があります：

<div class="row featurette"> 
    <div class="col-md-7 col-md-push-5"> 
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
    </div> 
    <div class="col-md-5 col-md-pull-7"> 
     <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
    </div> 
    </div> 

（私はそれをテストしているだろうが、あなたのデモのリンクがちょうどエラーメッセージにつながると私は自分のデモを作るのが面倒だ。）

Answer 2

を達成しようとしているもののBootlyのデモです：

<div class="row featurette"> 
<div class="col-md-5 col-md-push-7"> 
    <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image"> 
</div> 
<div class="col-md-7 col-md-pull-5"> 
    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
</div> 

詳しく読むことができますブートストラップ3のCSS documentation