2017-11-18 47 views
0

我有兩個div,分別是col-md-8col-md-4(其中包含圖像)。在dektop視圖中,它看起來像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

你標記bootstrap 4,你可以通過使用flex classes來實現這個[見這裏](http://getbootstrap.com/docs/4.0/utilities/flex/) –

回答

0

可以在引導4(測試版)使用命令類。

一個你會添加類order-2,並(圖片),您將添加類order-1 order-sm-3

該課程添加到A使它始終處於「中等」位置。 B將向下移動,或者如果屏幕尺寸足夠大,則向上移動。

瞭解更多關於類hereHere是可以使用的所有響應斷點。