Twitter bootstrap 使用引导将列更改为行布局

早上好

我正在做一个布局，其中我有4列。在这4列中，首先是图像，就在标题和描述的下方。此特性必须保持在桌面和平板电脑模式下。在这一点上我没有问题

代码：

当移动模式改变过来时，你是4列必须变成1列4行。例如：

图像必须位于描述的左侧和右侧

我不知道如何在移动模式下执行此操作

有人能帮我吗

---

来自西班牙的问候语

您可以尝试以下方式

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

标题
关于图像的描述在这里

标题
关于图像的描述在这里

标题
关于图像的描述在这里

标题
关于图像的描述在这里

像这样试试：

在每个

列-***-***

之后，尝试添加

行div

，以使内容与此处添加的代码一起完全展开

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

德格拉多学院
里奥哈城市的研究和项目

到目前为止您尝试了什么？发布代码/创建演示。。所以其他人可以帮你…我有问题的代码@G.L.P。你能帮忙吗？