Bootstrap 3 仅在小屏幕上更改 div 顺序 [英] Bootstrap 3 changing div order on small screens only

查看：22
本文介绍了Bootstrap 3 仅在小屏幕上更改 div 顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

做我的第一个响应式设计，这在 Bootstrap 3 中是可能的.改变这个

到

将顺序从大屏幕上的 3 列布局更改为将徽标向左移动并仅在小屏幕上堆叠其他两列.如果可能的话，我想使用 Bootstrap 类(col-xs-6 col-md-4 等)来做到这一点，而不必以显示/隐藏的方式复制内容.我喜欢 bootstrap3 为大屏幕提供的网格布局，所以如果可以在小屏幕上整理布局，我宁愿保留它.

解决方案

DEMO: http://jsbin.com/uZiKAha/1

DEMO w/edit:http://jsbin.com/uZiKAha/1/edit

是的，这可以在没有 JS 的情况下使用 BS3 嵌套和推/拉以及清除所有浮动来完成:

 
<div class="row"><div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">标识
<div class="col-xs-6 col-sm-8"><div class="row"><div class="col-sm-6 col-sm-pull-6 boxb">乙

<div class="col-sm-6 boxa">一个

<!--嵌套的 .row-->

Doing my 1st responsive design and is something like this possible in Bootstrap 3. Change this

To

Change the order essentially from a 3 column layout on large screens to moving the logo to left and stack the other two columns on smaller screens only. I would like to do it using the Bootstrap classes (col-xs-6 col-md-4 etc.) if possible and not have to duplicate content in a show/hide sort of fashion. I liked the grid layout bootstrap3 provides for large screens so would prefer to keep it if could sort out the layout on smaller screens.

解决方案

DEMO: http://jsbin.com/uZiKAha/1

DEMO w/edit: http://jsbin.com/uZiKAha/1/edit

Yes, this can be done without JS using BS3 nesting and pushing/pulling and all the floats clear:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

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

这篇关于Bootstrap 3 仅在小屏幕上更改 div 顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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