Bootstrap交替布局以堆叠在移动设备中 [英] Bootstrap Alternating Layout to stacked in mobile

问题描述

我在Bootstrap中有一个基本的响应式布局，其中图像位于文本块旁边.在第一行中，图像在左侧，在第二行中，图像在右侧.这会在页面上重复.

I have a basic responsive layout in Bootstrap where the image sits next to the block of text. In the first row the image is on the left, in the second row the image is on the right. This repeats down the page.

问题:当用户在移动设备上时，图像变为全角(应按原样)，但是对于图像右对齐的任何行，它位于文本下方，而不是上方(请参见代码)以下).我知道为什么会这样，但是我想知道引导程序中是否有一个类可以解决这个问题?它必须相当普遍，所以这里建议的最佳做法是什么?

The problem: when the user is on a mobile device, the images go full width (as they should), however for any row with the image aligned to the right, it is sitting below the text rather than above (see code below). I understand why this is happening, but am wondering if there is a class within bootstrap that can correct this? It must be fairly common, so what is the suggested best practice here?

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive"/>
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive" />
          </div>      
    </div>
</div>

任何帮助将不胜感激.

推荐答案

您正在寻找类似嵌套列的内容:这是文档:

You're looking for something like Nesting Columns : Here is the doc : http://getbootstrap.com/css/#grid-nesting

引导: http://www.bootply.com/qsdH9jr70F

查看此代码:特别是 col-sm-push-6 和 col-sm-pull-6

Look this code : and specially at col-sm-push-6 and col-sm-pull-6

HTML :

<div class="container">
    <div class="row feature">
          <div class="col-sm-6 col-md-6">
            <img src="url" class="img-responsive">
          </div>
          <div class="col-sm-6 col-md-6">
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>      
    </div>
    <div class="row feature">      
          <div class="col-sm-push-6 col-sm-6 col-md-6">   <!--   HERE   -->
            <img src="url" class="img-responsive">
          </div>   
          <div class="col-sm-6 col-sm-pull-6 col-md-6">   <!--   HERE   -->
            <h1>title</h1>
            <h3>subtitle</h3>
            <p>body</p>
          </div>   
    </div>
</div>

这篇关于Bootstrap交替布局以堆叠在移动设备中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！