Bootstrap 列排序不起作用 [英] Bootstrap column ordering not working

查看：90
本文介绍了Bootstrap 列排序不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下网格，我尝试在右侧显示图像，左侧显示 sm、md 和 lg 屏幕的文本.但是在 xs 屏幕上，我想对图像重新排序，使其位于文本上方.当我尝试推拉时xs 设备整个布局变得一团糟.实现这一目标的正确方法是什么?

<div class="row"><div class="col-xs-12 col-sm-5 col-xs-push-12"><h3 class="h3 ">一些标题</h3><p>一些文字</p>
<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 class="row"><div class="col-sm-7 col-sm-push-5" ><img src="img/someimage.png" class="img-responsive" >
<div class="col-sm-5 col-sm-pull-7"><h3 class="h3 ">一些标题</h3><p>一些文字</p>

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>

解决方案

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>

这篇关于Bootstrap 列排序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆