2017-11-18 10 views
0

私はクラスcol-md-8col-md-4(画像を含む)の2つのdivがあります。デスクトップビューではA Bのように見えますが、モバイルビューではBが上向き、Aがになります。ブートストラップを使用してモバイルビューでdivを上に移動

<div class="content"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class=**"col-md-8"**> 
       <div class="card"> 
        <div class="header"> 
         <h4 class="title">ABC</h4> 
        </div> 
        <div class="content"> 
         <form> 
          <div class="row"> 
           <div class="col-md-5"> 
            <div class="form-group"> 
             <label>Company</label> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="exampleInputEmail1">Email address (disabled)</label> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <label>First Name</label> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <label>Last Name</label> 
            </div> 
           </div> 
          </div> 
          <div class="clearfix"></div> 
         </form> 
        </div> 
       </div> 
      </div> 
      <div class=**"col-md-4"**> 
       <div class="card card-user"> 
        <div class="image"> 
         <img src="IMG/ABC.HTML" alt="..."/> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
+0

あなたはブートストラップ4にタグをつけていますが、これはフレックスクラスを使用することで実現できます[http://getbootstrap.com/docs/4.0/utilities/flex/] –

答えて

0

ブートストラップ4(ベータ版)に順番クラスを使用することができます。

は、ここでは、コードです。

するには、クラスorder-2を追加します、とB(写真)に、あなたはクラスorder-1 order-sm-3を追加します。

クラスをに追加すると、は常に「中」になります。 は画面のサイズが十分に大きい場合は下に移動します。

クラスの詳細についてはhereをご覧ください。 Hereは、使用可能なすべての応答可能なブレークポイントです。

関連する問題