Bootstrap 3只改变小屏幕上的div顺序 [英] Bootstrap 3 changing div order on small screens only

问题描述

执行我的第一个响应设计，这是可能在bootstrap 3.这个

doing my 1st responsive design and is something like this possible in bootstrap 3. Change this

到

基本上从大屏幕上的3列布局更改顺序，将徽标移动到左侧，并将其他两列堆叠在较小的屏幕上。我想使用引导类（col-xs-6 col-md-4等），如果可能的话，不必以显示/隐藏的方式重复内容。我喜欢网格布局bootstrap3提供大屏幕，所以更喜欢保持它，如果可以整理出在较小的屏幕上的布局。

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. Any recommended useful links or help on best approach for this appreciated.

感谢您的建议，
J

Thanks for ideas, J

ps你也可以建议基本的媒体查询（最小宽度，最大宽度等像素）开始。

ps can you also advise on basic media queries (min-width, max-width etc in pixels) to start with.

推荐答案

演示： http：// jsbin .com / uZiKAha / 1

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

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

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屋！