twitter-bootstraptwitter-bootstrap-3liferay-theme

Changing columns to rows layout with Bootstrap

Good morning!

I'm doing a layout in which I have 4 columns. In these 4 columns first is the image, just below your title and description. This aspect must be kept in desktop and tablet mode. At this point I have no problem

modeDesktop

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

Change comes when mobile mode, you are 4 columns have to become 1 column with 4 rows. Example:

modeMobile

The image must be to the left and right description.

I do not know how to do this in mobile mode

Can somebody help me?

greetings from Spain

Solution

  • Try like this: Demo

    After every col-**-**, try to add row div to get your content to expanded fully along with the code added here

    <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>