我正在处理的网站是新闻通讯类型，每行之后应该有一个小横幅，比方说Google广告。
有了每个新的断点，每个新闻行将增加1个项目
小img描述我试图实现的目标
如果我使用这个标记
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="col-sm-4 col-md-3">
<div class="col-sm-4 col-md-3">
<div class="col-sm-4 col-md-3">
</div>
<div class="row banner">
... img ...
</div>
sm上将发生的是第4个元素将折叠到新行，并且应找到md我希望此标记中的第4个元素位于横幅后的新行（行）上
附言在每种情况下都不能使用hidden- *，因为在超宽屏幕（1920像素）上，该行的第6项会出现。像这样
XS-2件
sm-3件
md-4件
lg-5件
lg-6件
当然，有多行和多个横幅，没有内容应隐藏
编辑：
我想出了一些非常简单的方法，使用jquery粘贴新行。
$(document).ready(function(){
function banner_layout(num, content){
return $(".news-grid .col-sm-6:nth-child("+ num +")").before( "<div class='col-xs-12 content-banner text-center'>" + content + "</div>");
};
function place_banner(position, content){
var p = position;
if (p == 1){
if ( $(window).innerWidth() > 320 && $(window).innerWidth() < 768) {
banner_layout(2, content);}
else if ( $(window).innerWidth() > 768 && $(window).innerWidth() < 992) {
banner_layout(3, content);}
else if ( $(window).innerWidth() > 992 && $(window).innerWidth() < 1200) {
banner_layout(4, content);}
else if ( $(window).innerWidth() > 1200 && $(window).innerWidth() < 1680) {
banner_layout(5, content);}
else if ( $(window).innerWidth() > 1680) {
banner_layout(6, content);}
}
};
place_banner(1, "<img src='http://placehold.it/1000x100' class='img-responsive' />");
$( window ).resize(function() {
$('.content-banner').remove();
place_banner(1, "<img src='http://placehold.it/1000x100' class='img-responsive' />");
});
});
最佳答案
1）通过jQuery
脚本根据屏幕宽度将列从一行移到另一行。
https://jsfiddle.net/glebkema/y07re3rq/
$(document).ready(function() {
var selectAfter = $( '#after' );
var selectBefore = $( '#before' );
var numBefore = 6;
checkBefore();
$(window).resize( checkBefore );
function checkBefore() {
var widthNew = window.innerWidth;
if ( widthNew < 768 ) { setBefore(2) }
else if ( widthNew < 992 ) { setBefore(3) }
else if ( widthNew < 1200 ) { setBefore(4) }
else { setBefore(6) };
}
function setBefore( numNew ) {
while ( numBefore > numNew ) {
selectBefore.children( 'div:last-child' ).prependTo( selectAfter );
numBefore--;
}
while ( numBefore < numNew ) {
selectAfter.children( 'div:first-child' ).appendTo( selectBefore );
numBefore++;
}
}
});/* Decorations */
.col-xs-6, .col-xs-12 { color: #fff; font-size: 48px; padding-bottom: 52px; padding-top: 14px; text-align: center; }
.col-xs-6:nth-child(2n+1) { background: #69c; }
.col-xs-6:nth-child(2n+2) { background: #9c6; }
.col-xs-12 { background: #c69; padding-bottom: 16px; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row" id="before">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
</div>
<div class="row">
<div class="col-xs-12">Banner</div>
</div>
<div class="row" id="after">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>2）通过CSS（仅适用于固定高度的列）
https://jsfiddle.net/glebkema/38w7L6jt/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
/* Heights */
.col-xs-12 { height: 120px;}
.col-xs-6 { height: 300px;}
/* Make free space for the banner */
.col-xs-6:nth-child(2) { margin-bottom: 120px; }
.col-xs-6:nth-child(3) { margin-bottom: 120px; }
@media (min-width: 768px) { .col-xs-6:nth-child(4) { margin-bottom: 120px; } }
@media (min-width: 992px) { .col-xs-6:nth-child(5) { margin-bottom: 120px; } }
@media (min-width: 1120px) { .col-xs-6:nth-child(6) { margin-bottom: 120px; }
.col-xs-6:nth-child(7) { margin-bottom: 120px; } }
/* Move the banner down */
.row { position: relative; }
.col-xs-12 { height: 120px; position: absolute; left: 0; right: 0; top: 300px; }
/* Decorations */
.col-xs-6, .col-xs-12 { color: #fff; font-size: 48px; padding-top: 14px; text-align: center; }
.col-xs-6:nth-child(2n+1) { background: #69c; }
.col-xs-6:nth-child(2n+2) { background: #9c6; }
.col-xs-12 { background: #c69; }<div class="container">
<div class="row">
<div class="col-xs-12">Banner</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>
</div>
</div>