Changing columns to rows layout with Bootstrap

Question

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

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

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

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

what you tried so far? post your code / create a demo.. so others can help you... — G.L.P, Mar 02 '16 at 07:54
I have the code in question @G.L.P . Is this: http://www.bootply.com/Sv6rAEA9Jz .you can help? — JMF, Mar 02 '16 at 08:01

score 4 · Accepted Answer · edited Jun 27 '19 at 03:10

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>

score 1 · Answer 2 · answered Mar 02 '16 at 08:03

You can try something like below

<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

Changing columns to rows layout with Bootstrap

2 Answers2