Question

我有以下布局：

AVAudioSessionRecordPermissionGranted

正如您所看到的，第三列中有一个额外的div。当页面以<div class="row"> <div class="col-lg-3 hidden-xs"> Column 1 </div> <div class="col-lg-4 col-xs-12"> Column 2 </div> <div class="col-lg-5 hidden-xs"> Column 3 <div id="important">This needs to be displayed</div> </div> </div>大小呈现时，我希望将它移动到第二列。我知道我可以复制它，但我宁愿不复制。是否有一种简单/更好的方法来实现这一目标？

编辑：Bootply：http://www.bootply.com/FY98eVO6hC

Answer 1

获取#important div的html并在窗口加载小屏幕时附加

foreach (var rtSubString in a1.RichText)
{
    //do something with the string segment rtSubString
}

Answer 2

您应该只能查询窗口宽度并采取相应措施。 xs断点为767px。显然，当大于#important时，您需要添加额外的逻辑以满足需要返回第3列的767px元素; - ）

JS / jQuery的

function resize()
{
    var width = $(window).width();
    if (width <= 767) // xs breakpoint
    {
        var html = $('#important').html(); // get the current "important" html
        $('#important').remove(); // remove from current column

        // Append to second/middle column
        $('.col-lg-4.hidden-xs').append('<div id="important">'+ html +'</div>');
    }
 }

$(document).ready(function(){
    resize(); // set on page load

    // listen for window resize events
    $( window ).resize(function() {
          resize(); 
    });
});

NB ：标准引导程序断点

xs = 0 - 767 pixels
sm = 768 - 991 pixels
md = 992 - 1199 pixels
lg = 1200+ pixels

根据屏幕大小将div放在特定列中

2 个答案: