Question

鉴于我有这个片段

<div class="container">
    <div class="row">
        <div id="left" class="col-xs-5 col-sm-5">
          How are you?
        </div>
        <div id="right" class="col-xs-7 col-sm-7">
          Thanks, I'm fine.
        </div>
    </div>
</div>

如果在浏览器上打开，则应显示

How are you? Thanks, I'm fine.

当浏览器减少到小于768px时，我希望上面的代码段产生

Thanks, I'm fine.
How are you?

我正在使用以下javascript来检测浏览器的视口宽度是＆lt; = 767。

 /*
  @Leo
  Obtained from: 
  http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto
*/

var getviewport = function(){

    var viewPortWidth;
    var viewPortHeight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth,
        viewPortHeight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }

     // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
};

var adjust = function(){
    var width = getviewport()[0];

    if(width<=767){
        $("#left").addClass("col-xs-push-7");
        $("#right").addClass("col-xs-pull-5");
    }
    else{
        $("#left").removeClass("col-xs-push-7");
        $("#right").removeClass("col-xs-pull-5");       }
};
adjust();
$(window).resize(adjust);

因此，当视口宽度为＆lt; = 767时。我试着订购声明

"How are you? Thanks, I'm fine." to  "Thanks, I'm fine. How are you?

通过添加相应的xs-push- *和xs-pull- *我能够实现上述排序“谢谢，我很好。你好吗？”

然而，我觉得可以采取进一步措施来打破陈述

Thanks, I'm fine.
How are you?

如果有人可以提供帮助，我会很高兴。

Answer 1

如果我理解你的问题，你可以用Bootstrap完全做到这一点，不需要js！

要设置768px断点下方的样式，只需使用col-xs-。要设置768以上的样式，请使用col-sm-。您无法交换堆积列的顺序（它们始终是它们以与标记中相同的顺序出现的顺序），但您可以使用推送和拉更改768断点之上的顺序。

在标记中，按照您希望它们在堆叠时显示的方式排序
添加您的xs课程 - 我不确定我理解您的需求，但我认为.col-xs-10.col-xs-offset-1
添加“大于 - xs”类。所以.col-sm-5和.col-sm-7，使用.col-sm-offset-0删除偏移量，然后通过推送一列并拉动另一列来切换订单

这是一个工作片段。查看它的全窗口，看看它如何在768以上工作。结果将如下所示：

宽（Bootstrap sm及以上）：

Narrow（Bootstrap xs）：

（粉色区域只是为了显示堆叠的列居中col-10）

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

/* all of this just for demo purposes */
 body {
  margin: 10px;
}
.container {
  background: rgba(255,0,0,.4);
}
.row div {
  border: 1px solid #000;
  background: #fff;
  height: 40px;
}
.row div:first-child {
  background: #000;
  color: #fff;
}

<div class="container">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-push-7 col-sm-offset-0"></div>
    <div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-pull-5 col-sm-offset-0"></div>
  </div>
</div>

Bootstrap从左到右重新排序，然后右转到新行

1 个答案: