移動 - 優文庫

更改引導佈局我這裏有一個的jsfiddle - https://jsfiddle.net/a4cbvzj7/1/移動

超級簡單的引導佈局，二關口，上底頂部的文本圖像。

在移動大小我想在底部的頂部圖像上的文本。

我可以用推拉來做到這一點，還是我需要兩種佈局，並在桌面，手機上隱藏和顯示它們。

<div class="container"> 
     <div class="row"> 
     <div class="col-sm-12 text-center"> 
      <img src="http://placehold.it/350x150" alt="" class="img-responsive"/> 
     </div> 
     <div class="col-sm-12 text-center"> 
      <p class="text"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 

      </p> 
     </div> 
     </div> 
    </div>

來源

2016-03-04 ttmt

看來你所提供的不是在兩列布局，但我可以找出你需要什麼。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 text-center col-md-push-6"> 
     <p class="text"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
     </p> 
    </div> 
    <div class="col-md-6 text-center col-md-pull-6"> 
     <img src="http://placehold.it/350x150" alt="" class="img-responsive"/> 
    </div> 
    </div> 
</div>

，如果你想了解更多，然後看看：http://getbootstrap.com/css/#grid 和校驗色譜柱訂貨

來源

2016-03-04 11:12:07 jsg

我看看你的意思，他們實際上並不是彼此相鄰的列，但是他們被設置爲12，因此他們坐在每一個之上呃這是我想要的方式。你的佈局有他們相鄰。 – ttmt

您可以通過隱藏xs類的移動設備來隱藏某個類和隱藏sm隱藏md的隱藏lg爲您想要隱藏在桌面和平板電腦上的類。由於推拉只能用於允許連續多列的列類。 – jsg

或者你可以做一個小的JavaScript語句，它將能夠識別瀏覽器寬度小於767px，並重新定位類 – jsg

你可以做到這一點簡單地使用媒體查詢像

@media (max-width: 768px){ 
.row { 
    display: flex; 
    flex-direction: column-reverse; 
    } 
}

更新小提琴here

來源

2016-03-04 11:32:59

移動

回答

相關問題