document.addEventListener("DOMContentLoaded", function(event) {
var container = document.querySelector('.container');
var items = document.querySelectorAll('.container .box');
var reorderitems = function(matched) {
if (matched) {
container.appendChild(items[0]);
container.appendChild(items[3]);
container.appendChild(items[5]);
} else {
container.insertBefore(items[2], items[3]);
container.insertBefore(items[1], items[2]);
container.insertBefore(items[4], items[5]);
container.appendChild(items[6]);
}
}
reorderitems(window.outerWidth > 500);
window.matchMedia("(min-width: 501px)").addListener(function(e) {
if (e.matches) {
reorderitems(true);
} else {
reorderitems(false);
}
});
});
.left {
width: 75%;
}
.right {
float: right;
width: 25%;
clear: right
}
.green {
background-color: #90EE90;
}
.blue {
background-color: #20B2AA;
}
.orange {
background-color: #FFA07A;
}
.pink {
background-color: #FFB6C1;
}
.yellow {
background-color: #FFD700;
}
.teal {
background-color: #00CED1;
}
.purple {
background-color: #9370DB;
}
@media (max-width: 500px) {
.left,
.right {
float: none;
width: 100%;
}
}
<div class="container">
<div class="box box1 left green">
BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
</div>
<div class="box box2 right orange">
BOX 2 (small)
</div>
<div class="box box3 right blue">
BOX 3 (small)
</div>
<div class="box box4 left pink">
BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum.
</div>
<div class="box box5 right yellow">
BOX 5 (small)
</div>
<div class="box box6 left teal">
BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci
in, efficitur pulvinar ipsum.
</div>
<div class="box box7 right purple">
BOX 7 (small)
</div>
</div>
display：table与“使用表格进行布局”不同。简短回答：如果表格布局是解决方案，则使用表格布局。不使用HTML表格布局的想法是，您的HTML应该描述您的信息，如果您的信息不是表格，则为什么要使用表格来描述它？另一方面，CSSdisplay：table与您的标记无关，仅涉及呈现，可以根据需求随便使用。 - Sergiu Paraschivdisplay:table并不等同于<table>。人们对此感到如此激动，以至于他们忘记即使是<table>在有表格布局的情况下也完全没问题。 - Scott Marcusdisplay:table来处理大视口，那么您可以在另一个媒体查询中为小视口设置不同的（单列）布局。非常简单。 - Scott Marcus