使用Bootstrap將列更改爲行佈局

Question

早上好！

我正在做一個佈局，我有4列。在這四列中，首先是圖片，就在您的標題和描述下方。這方面必須保持在桌面和平板電腦模式。在這一點上我沒有問題

CODE：http://www.bootply.com/Sv6rAEA9Jz

變化正值當移動模式時，你是4列有可能成爲1列，4行。例如：

圖片必須是在左，右的描述。

我不知道如何在移動模式下做到這一點

有人可以幫助我嗎？

來自西班牙

問候

Answer 1

嘗試這樣的：Demo

每col-**-**後，嘗試添加row div得到你的內容t o與此處添加的代碼一起完全擴展

<div class="col-md-3 col-sm-12 col-xs-12"> 
<div class="cajaContenido col-sm-12"> 
      <div class="imagenContenido col-xs-6 col-sm-6 col-md-12"> 
       <img class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg" id="yui_patched_v3_11_0_1_1456387393358_870"> 
      </div> 
      <div class="textoContenido col-xs-6 col-sm-6 col-md-12"> 
       <div class="contenidoUr"> 
       <h5>ESTUDIOS DE GRADO</h5> 
       <p>Estudios y proyectos en la cuna del rioja</p> 
       </div> 
      </div>  
      </div>   
     </div>  

Answer 2

你可以嘗試像下面

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="col-sm-12 col-xs-4"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;"> 
     </div> 
     <div class="col-sm-12 col-xs-8"> 
     <h3>Heading</h3> 
     <p>Description about the image goes here</p> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="col-sm-12 col-xs-4"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;"> 
     </div> 
     <div class="col-sm-12 col-xs-8"> 
     <h3>Heading</h3> 
     <p>Description about the image goes here</p> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="col-sm-12 col-xs-4"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;"> 
     </div> 
     <div class="col-sm-12 col-xs-8"> 
     <h3>Heading</h3> 
     <p>Description about the image goes here</p> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> 
     <div class="col-sm-12 col-xs-4"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" style="min-width: 128px; max-width: 128px;"> 
     </div> 
     <div class="col-sm-12 col-xs-8"> 
     <h3>Heading</h3> 
     <p>Description about the image goes here</p> 
     </div> 
    </div> 
    </div> 
</div> 

JSFiddle