自舉行 - 讓最下面一行出現在頂部

我遇到了自舉行的問題。我想在現代網站中使用左圖&。但是在較小的屏幕上，我需要將圖像置於頂部。自舉行 - 讓最下面一行出現在頂部

然而，出現這種情況：

我想過使用彎曲，但它沒有我需要的圖像是流體響應行。

<div class="container"> 
    <div class="row"> 

    <div class="col-md-7 col-sm-12 col-xs-12 "> 

     // Text Data 

    </div> 

    <div class="col-md-5 col-sm-12 col-xs-12 "> 

     <img class="img-fluid" src="url"></img> 

    </div> 

    </div> 
</div>

來源

2017-08-02 Sam.tuver

https://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view它已經回答了。請看這裏！ –

您鏈接的問題未標記爲bootstrap-v4，接受的答案僅適用於v3，因此不會重複。 – sidhuko

你有正確的想法！ Bootstrap v4網格系統可以處理柔性修改器。

https://v4-alpha.getbootstrap.com/layout/grid/#flex-order

在你的情況flex-first修改將移動文本之前的內容。您可以使用斷點也即flex-md-first

<div class="container"> 
    <div class="row"> 
    <div class="col-md-7 col-sm-12 col-xs-12"> 
     // Text Data 
    </div> 
    <div class="col-md-5 col-sm-12 col-xs-12 flex-md-first"> 
     <img class="img-fluid" src="url"></img> 
    </div> 
    </div> 
</div>

Codepen使用這些：https://codepen.io/sidhuko/pen/gxwprN

來源

2017-08-02 15:20:03 sidhuko

你不能逆您的COL-XS-12的訂單，但這裏有點劈:)。當寬度等於767px或最小值時，文本出現在圖像下方。

@media (max-width: 767px) { 
 

 
    .row.reorder-xs { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 

 
    direction: rtl; 
 
    } 
 

 
    .row.reorder-xs > [class*="col-"] { 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform: rotate(-180deg); 
 
    -o-transform: rotate(-180deg); 
 
    transform: rotate(-180deg); 
 

 
    direction: ltr; 
 
    } 
 

 
}

<div class="container"> 
 
    <div class="row reorder-xs"> 
 

 
    <div class="col-md-7 col-sm-12 col-xs-12 "> 
 

 
     // Text Data 
 

 
    </div> 
 

 
    <div class="col-md-5 col-sm-12 col-xs-12"> 
 

 
     <img class="img-fluid" src="https://dummyimage.com/300"></img> 
 

 
    </div> 
 

 
    </div> 
 
</div>

來源

2017-08-02 15:17:32

有趣的解決方案，但你不需要:) https://v4-alpha.getbootstrap.com/layout/grid/#flex-order – sidhuko

啊是的，我沒有考慮檢查Bootstrap 4，奇妙的 –

如果我正確理解，請試試這個：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-md-7 col-md-push-5"> 
 

 
     // Text Data 
 

 
    </div> 
 

 
    <div class="col-md-5 col-md-pull-7"> 
 

 
     <img class="http://via.placeholder.com/350x150" src="url"></img> 
 

 
    </div> 
 

 
    </div> 
 
</div>

感謝。

來源

2017-08-03 05:26:21 Rohan

自舉行 - 讓最下面一行出現在頂部

回答

相關問題