Bootstrap column ordering not working

问题

I have the following grid where I'm trying to display the image on the right and the text on the left for sm, md, and lg screens. However on xs screens I would like to reorder the image so that its above the text. When I try the push pull for xs devices the entire layout gets messed up. Whats the correct way to achieve this?

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

回答1:

an easy way to fix this would be to hide some of the stuff at certain screen sizes:

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

回答2:

Fixed a s follows:

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

You could create two rows, one for: large, medium and small screen. And one for extra small screen. Here a working example.

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

来源：https://stackoverflow.com/questions/33488780/bootstrap-column-ordering-not-working

标签

css

twitter-bootstrap

responsive-design