Question

我有以下网格，我试图在右侧显示图像，在左侧显示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>

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

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

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

Bootstrap列排序不起作用

3 个答案: