Question

我正在用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>

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

bootstrap列顺序无法在xs屏幕上运行

1 个答案: