引導推輓在多個COLS

在網站上我有一些看起來像這樣引導推輓在多個COLS

---------------------------------- 
| Image 1 | Image 2 | Image 3 | 
---------------------------------- 
| Text 1 | Text 2 | Text 3 | 
----------------------------------

在較小的設備我想這

---------------------- 
| Image 1 | Text 1 | 
---------------------- 
| Image 2 | Text 2 | 
---------------------- 
| Image 3 | Text 3 | 
----------------------

在移動設備上我想這個

----------- 
| Image 1 | 
----------- 
| Text 1 | 
----------- 
| Image 2 | 
----------- 
| Text 2 | 
----------- 
| Image 3 | 
----------- 
| Text 3 | 
-----------

顯然這會導致塊被推/拉多次。 Bootstrap似乎沒有演示如何做到這一點。

這是我至今沒有按壓的編碼/拉：

      <div id="services" class="col-sm-12"> 
           <div id="services-img" class="col-lg-4 col-md-4 col-sm-4"> 
             <img>IMG 1 HERE</img>       
           </div> 
           <div id="services-img" class="col-lg-4 col-md-4 col-sm-4"> 
             <img>IMG 2 HERE</img>       
           </div> 
           <div id="services-img" class="col-lg-4 col-md-4 col-sm-4"> 
             <img>IMG 3 HERE</img>       
           </div> 
           <div id="services-text" class="col-lg-4 col-md-4 col-sm-4"> 
             <p>TEXT 1 HERE</p>       
           </div> 
           <div id="services-text" class="col-lg-4 col-md-4 col-sm-4"> 
             <p>TEXT 2 HERE</p>       
           </div> 
           <div id="services-text" class="col-lg-4 col-md-4 col-sm-4"> 
             <p>TEXT 3 HERE</p>       
           </div> 
          </div>

來源

2015-05-17 user964111

將在整個事件中<div class="container">和改變你的第一<div id="services" class="col-sm-12">到<div id="services" class="row">

工作實例http://www.codeply.com/go/6x2iKhjcXj

順便說一句 - 你不能有相同的ID像元素service-img

來源

2015-05-17 14:04:03 Cory

DEMO：http://jsfiddle.net/fopdasqo/1/

無需拉或推:)

<div id="services" class="col-sm-12"> 
    <div class="col-xs-12 col-md-4"> 
     <div id="services-img" class="col-sm-6 col-md-12"> 
      <img>IMG 1 HERE</img>       
     </div> 
     <div id="services-text" class="col-sm-6 col-md-12"> 
      <p>TEXT 1 HERE</p>       
     </div> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <div id="services-img" class="col-sm-6 col-md-12"> 
      <img>IMG 2 HERE</img>       
     </div> 
     <div id="services-text" class="col-sm-6 col-md-12"> 
      <p>TEXT 2 HERE</p>       
     </div> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <div id="services-img" class="col-sm-6 col-md-12"> 
      <img>IMG 3 HERE</img>       
     </div> 
     <div id="services-text" class="col-sm-6 col-md-12"> 
      <p>TEXT 3 HERE</p>       
     </div> 
    </div> 
</div>

來源

2015-05-17 14:11:38 trs

順便說一句，我使用「XS」，「SM」既然你提到的手機和平板電腦「MD」。「lg」將自動從「md」中讀取。如果要將媒體查詢移動一個較大的斷點，請將所有「xs」替換爲「sm」，將「sm」替換爲「md」，將「md」替換爲「lg」。如果您想要測試DEMO全屏，請點擊此處：https：//jsfiddle.net/fopdasqo/1/embedded/result/ – trs

引導推輓在多個COLS

回答

相關問題