Question

我这里有一个jsfiddle - https://jsfiddle.net/a4cbvzj7/1/

超级简单的引导程序布局，两个col，底部顶部文本的图像。

在移动设备尺寸上，我想在底部的顶部图片上显示文字。

我可以通过推拉来完成此操作，还是需要有两个布局并隐藏并在桌面移动设备上显示它们。

    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center">
          <img src="http://placehold.it/350x150" alt="" class="img-responsive"/>
        </div>
        <div class="col-sm-12 text-center">
          <p class="text">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

          </p>
        </div>
      </div>
    </div>

Answer 1

您所提供的内容似乎不是两列布局，但我可以找出您需要的内容。

<div class="container">
  <div class="row">
    <div class="col-md-6 text-center col-md-push-6">
      <p class="text">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>
    <div class="col-md-6 text-center col-md-pull-6">
      <img src="http://placehold.it/350x150" alt="" class="img-responsive"/>
    </div>
  </div>
</div>

如果您想了解更多信息，请查看：http://getbootstrap.com/css/#grid 和结帐列排序

Answer 2

您只需使用

等媒体查询即可实现此目的

@media (max-width: 768px){
 .row {
   display: flex;
   flex-direction: column-reverse;
  } 
}

更新了小提琴here

在移动设备上更改引导程序布局

2 个答案: