引导列排序不起作用答案

【问题标题】：Bootstrap column ordering not working引导列排序不起作用
【发布时间】：2015-11-03 07:42:08
【问题描述】：

我有以下网格，我试图在右侧显示图像，在左侧显示 sm、md 和 lg 屏幕的文本。但是在 xs 屏幕上，我想重新排序图像，使其高于文本。当我尝试推拉 xs 设备整个布局都搞砸了。实现这一目标的正确方法是什么？

<div class="container">
              <div class="row">
                    <div class="col-xs-12 col-sm-5 col-xs-push-12">
                        <h3 class="h3 ">Some heading</h3>
                        <p>some text</p>
                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-12 col-sm-7 col-xs-pull-12" >
                        <img src="img/someimage.png" class="img-responsive" >
                    </div>
                </div>

 </div>

【问题讨论】：

你能告诉我们发生了什么吗
没关系，我已经设法通过首先使用移动设备来修复它，即订购 html 我希望它如何出现在 xs 设备上，然后使用推拉在桌面设备上重新排序。

标签： css twitter-bootstrap responsive-design

【解决方案1】：

解决此问题的一种简单方法是在某些屏幕尺寸下隐藏一些内容：

<div class="container">
          <div class="row">
            <div class="col-xs-12 visible-xs" >
                <img src="images/img_back.jpg" class="img-responsive" >
            </div>

            <div class="col-xs-12 col-sm-5">
                <h3 class="h3 ">Some heading</h3>
                <p>some text</p>
            </div>

            <div class="hidden-xs col-sm-7" >
                <img src="images/img_back.jpg" class="img-responsive" >
            </div>
        </div>
 </div>

【讨论】：

基本上除了 xs 之外，每个分辨率的图像都隐藏在顶部。在所有其他尺寸下，较大的图像显示在右侧。这似乎会更容易处理。

【解决方案2】：

修正如下：

<div class="container">
          <div class="row">
                <div class="col-sm-7 col-sm-push-5" >
                    <img src="img/someimage.png" class="img-responsive" >
                </div>
                <div class="col-sm-5 col-sm-pull-7">
                    <h3 class="h3 ">Some heading</h3>
                    <p>some text</p>
                </div>

            </div>

 </div>

【讨论】：

【解决方案3】：

您可以创建两行，一行用于：大屏幕、中屏幕和小屏幕。还有一个用于超小屏幕。 Here 一个工作示例。

<div class="container">
  <div class="row hidden-xs">
    <div class="col-lg-7 col-md-7 col-sm-7 ">
      <h3 class="h3">Some heading</h3>
      <p>some text</p>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-5 ">
      <img src="http://lorempixel.com/400/200/" class="img-responsive" />
    </div>
  </div>
  <div class="row visible-xs">
    <div class="col-xs-12 ">
      <img src="http://lorempixel.com/400/200/" class="img-responsive" />
    </div>
    <div class="col-xs-12 ">
      <h3 class="h3">Some heading</h3>
      <p>some text</p>
    </div>

  </div>
</div>

【讨论】：