引导列顺序在 xs 屏幕上不起作用答案

【问题标题】：bootstrap column order not working on xs screen引导列顺序在 xs 屏幕上不起作用
【发布时间】：2017-09-20 01:42:24
【问题描述】：

我正在制作一个有 2 个等宽列的行。第一个包含文本，第二个包含图像。在 lg/md/sm 屏幕上，文本将向左移动，图像在右侧，如下代码：

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-6">
       <div class="text-block">
           <h1>WordPress Theme Development</h1>
           <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
       </div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-6">
       <div class="img-block text-center">
           <img src="assets/pics/wordpress.png" alt="WordPress">
       </div>
    </div>
</div>

但在 xs 屏幕上，我希望图像顶部和底部文本。这就是为什么我在here 之后尝试了下面的代码，但它不起作用

<div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-push-12">
                    <div class="text-block">
                        <h1>WordPress Theme Development</h1>
                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-pull-12">
                    <div class="img-block text-center">
                        <img src="assets/pics/wordpress.png" alt="WordPress">
                    </div>
                </div>
            </div>

【问题讨论】：

标签： css twitter-bootstrap layout grid

【解决方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-md-push-6">
    <div class="img-block text-center">
      <img src="https://dummyimage.com/500x200/000/fff" alt="WordPress">
    </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-md-pull-6">
    <div class="text-block">
      <h1>WordPress Theme Development</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
    </div>
  </div>
</div>

【讨论】：

感谢您的回复，但我没有得到答案。我想要 xs 屏幕顶部的图像和底部的文本。在 lg/md/sm 屏幕上，左侧的文本和右侧的图像 :)
抱歉造成误解。更新答案
谢谢。现在我理解了代码，图像应该是带有推送的第一列，因为它将位于顶部，而文本应该是带有拉动的第二列，因为它将位于底部。我是对的:)？