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

时间:2013-12-19 00:25:12

标签: css twitter-bootstrap sorting mobile

做我的第一个响应式设计,在Bootstrap 3中就是这样。改变它

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

6 个答案:

答案 0 :(得分:35)

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

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

是的,这可以在没有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>

答案 1 :(得分:5)

使用bootstrap 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>
  

这是有效的,因为当有足够的空间时,它们首先浮动到它们的原始位置。然而,当大小到中等和空间丢失时,它们然后堆叠,因为它们不能相互浮动。请注意,虽然我两个都使用了6列,但即使它们不是6列也是如此。

以下是链接:http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

答案 2 :(得分:2)

通常,您希望对堆叠的元素进行分组,但在您的情况下BA无法分组,因为在一种情况下需要在它们之间插入Logo。你有两个选择

不使用JS,我认为这将是您最好的选择。 fiddle here

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

我们的想法是使用行的rollover属性在xs情况下向下推A。我还使用push / pull类重新排列sm情况下的div。但是,问题是Logo高于B。由于所有内容都在同一网格上,因此A与较大元素的底部对齐,为LogoB之间的空白提供空间。这真的没有纯Bootstrap CSS的任何解决方案。 (也许有人可以纠正我)

相反,我建议你在窗口调整大小时使用JS来移动div。 fiddle here

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

和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') );
        }
    });
});

编辑: 引用bootstrap grid docs获取有关推/拉/偏移类的信息。

答案 3 :(得分:1)

我设法通过使用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>

这是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();
    });
});

我希望它有所帮助。

答案 4 :(得分:0)

我制作了一个小的jQuery脚本,您可以使用它来获得所需的结果。 基本上,它只是检测移动视口,然后根据其col-class重新排序div:

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

if (isMobile) {
    var colArray = []; // Make an array of all your columns
    $('.column').each(function () { // Select all the desired columns based on a custom class selector

        if ($(this).hasClass('col-md-6')) { // <--- Change your conditions here
            colArray.unshift($(this));  // if condition is met, the column will be placed as the first element in the array, in my case all my col-md-6's
        } else {
            colArray.push($(this));
        };
    });

    //Now you have an array of the columns, ordered by your conditions
    for (var i = 0, l = colArray.length; i < l; i++) {
        //Just just iterate through the array, and insert each div before the next
        colArray[i].insertBefore(colArray[i+1]);
    }
}

答案 5 :(得分:-3)

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

的信息

Responsive Bootstrap3 css