CSS Bootstrap 3 仅在小屏幕上更改 div 顺序

Bootstrap 3 changing div order on small screens only

提问by Jay

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

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

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.

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

回答by Christina

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

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

DEMO w/edit: http://jsbin.com/uZiKAha/1/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:

是的，这可以在没有 JS 的情况下使用 BS3 嵌套和推/拉来完成，并且所有的浮点数都清除了：

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

回答by jroi_web

Using bootstrap 3:

使用引导程序 3：

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

This works because when there's enough space, they float into their original positions at first. However, when sized to medium and space is lost, they then stack since they can't float through eachother. Note that while I used 6 columns for both, this works even if they are NOT both 6 columns.

这是有效的，因为当有足够的空间时，它们首先会漂浮到原来的位置。但是，当大小为中等并且空间丢失时，它们会堆叠，因为它们不能相互漂浮。请注意，虽然我对两者都使用了 6 列，但即使它们不是 6 列，这也有效。

Here is the link: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

这是链接：http: //ageekandhisblog.com/bootstrap-3-change-stacking-order/

回答by kalhartt

In general you want to group elements that stack, but in your case Band Acan't be grouped since Logoneeds to be inserted between them in one case. You have two options

一般来说，你要组元素堆栈，但在你的情况B，并A不能进行分组，因为Logo它们之间在一种情况下被插入的需求。你有两个选择

Without using JS, I think this is going to be your best option. fiddle here

不使用 JS，我认为这将是您最好的选择。在这里摆弄

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

The idea is to use the rollover property of rows to push Adown in the xs case. I also use the push/pull classes to rearrange the divs in the sm case. However, the problem here is if Logois taller than B. Since everything is on the same grid, Aaligns with the bottom of the bigger element, giving us blankspace between Logoand B. This really doesn't have any solution with pure Bootstrap CSS. (Maybe someone can correct me)

这个想法是使用行的翻转属性A在 xs 情况下向下推。我还使用推/拉类来重新排列 sm 案例中的 div。但是，这里的问题是 ifLogo大于B. 由于所有内容都在同一个网格上，因此A与较大元素的底部对齐，在Logo和之间为我们提供了空白B。对于纯 Bootstrap CSS，这确实没有任何解决方案。（也许有人可以纠正我）

Instead, I suggest you use JS to move the div when the window resizes. fiddle here

相反，我建议您在调整窗口大小时使用 JS 来移动 div。在这里摆弄

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

and the JS

和 JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

EDIT: Reference the bootstrap grid docsfor info on the push/pull/offset classes.

编辑：有关推/拉/偏移类的信息，请参考引导网格文档。

回答by Abdo Belk

I managed to fix this by swapping the columns content using jQuery, Here's the markup:

我设法通过使用 jQuery 交换列内容来解决此问题，这是标记：

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

And here's the jQuery script:

这是 jQuery 脚本：

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

I hope it helps.

我希望它有帮助。

回答by Eirwin

not a complete answer but here is where you can find out about the bootstrap3 responsive classes

不是一个完整的答案，但您可以在这里找到有关 bootstrap3 响应类的信息

Responsive Bootstrap3 css

响应式 Bootstrap3 css