ブートストラップを使って左右に並んでいるグリッドの位置を上下に入れ替えます

中画面には2つのdiv（コンテンツと画像）が並んでいます。したがってブートストラップを使って左右に並んでいるグリッドの位置を上下に入れ替えます

COL-MD-6（コンテンツ）COL-MD-4（画像）

、画面サイズが小さい画面とXSの画面に変更されたときにこれらのdivのは、によって側であってはなりませんサイド彼らがこのように上部と下部を整列させる必要があります。

画像

コンテンツ

ここ

は、私がメディアの画面にしようとしているコードです：

<div class="row"> 
<p class="col-md-6">Content comes here</p> 
<img src="someimage" class="col-md-4"/>

すなわち、画像が一番上にあるべきであり、コンテンツは小さな画面でそれ以下でなければなりません。

小さな画面では、私はトップにそれらを変換する方法のアイデアを得ることができないんだけど

と下部

私はグリッドポジションがプッシュを使用して、左右に変更して引っ張ることができます知っているが、どのように私は移動しません上の右側にある要素ですか？事前に感謝:)

出典

2016-12-12 Harish

を動作するはず質問 –

であなた*実際の*マークアップを含めてください@RoryMcCrossan申し訳ありませんが、私はちょうど私のコードを編集し、私は、コードにこの時間を言及しました。それを見てください。 – Harish

あなたが引くとxsとsmのためにそれらをプッシュすることができない場合は、あなただけのコードでそれらを交換し、mdためpull-pushを使用する必要があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-md-push-6"><img src="//placehold.it/200x150" class="img-fluid"></div> 
 
     <div class="col-md-6 col-md-pull-4"><p>Content comes here</p></div> 
 
    </div> 
 
</div>

出典

2016-12-12 08:18:38 Banzay

うわー、それは素晴らしい考えです、私はこの考えを持っていない、ありがとうございます:) – Harish

小さなデバイスのための12のグリッドを作る。

IMAGE

CONTENT`

<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
    IMAGE 
 
</div> 
 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
    CONTENT 
 
</div> 
 
</div>

出典

2016-12-12 08:08:07

しかし、小さな画面では、私の質問で明確ではないの申し訳なく、コンテンツではなく、一番上に画像が欲しいです。 – Harish

私はあなたの期待を持って、あなたはより多くのカスタムCSSを追加することができます

を10

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="favicon.ico"> 
 

 
    <title>Grid Template for Bootstrap</title> 
 
    <style> 
 
     .custom-row { 
 
     display: flex; 
 
     flex-direction: column; 
 
     } 
 

 
     .custom-row .img { 
 
     order: 1; 
 
     } 
 

 
     .custom-row .content { 
 
     order: 2; 
 
     } 
 

 
     @media (min-width: 992px) { 
 
     .custom-row { 
 
      display: block; 
 
     } 
 

 
     } 
 
    </style> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="row custom-row"> 
 
     <div class="col-md-4 col-xs-12 content"> 
 
      <h1>Bootstrap grid examples</h1> 
 
      <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p> 
 
     </div> 
 
     <div class="col-md-4 col-xs-12 img"> 
 
      <img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Example"> 
 
     </div> 
 
     </div> 
 
    </div> <!-- /container --> 
 
    </body> 
 
</html>

出典

2016-12-12 08:08:14

しかし、小さな画面では、私の質問ではっきりしていないため申し訳ありません、コンテンツではなく、一番上に画像が欲しいです。 – Harish

コードを更新しただけで、2番目の列を先頭に移動します。 –

私は大型および中型の画面でコンテンツを左側に、右側のイメージを小さく、xsスクリーンにする必要があります。上部にはコンテンツが、下部にはコンテンツが表示されます。 – Harish

プル右とプル左を使用クラス。それは

<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right"> 
 
    Content 
 
</div> 
 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left"> 
 
    image 
 
</div> 
 
</div>

出典

2016-12-12 08:33:44

ブートストラップを使って左右に並んでいるグリッドの位置を上下に入れ替えます

答えて

関連する問題