html 排序div,DIV元素排序的两种方法（Flexbox和负边距）

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

* {

box-sizing: border-box;

}

.island {

max-width: 1020px;

margin: 0 auto;

padding: 0 20px;

}

.row {

overflow: hidden;

margin: 0 -10px;

}

.col {

float: left;

width: 100%;

padding: 0 10px;

margin-bottom: 20px;

}

.flexbox .row--flex {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.flexbox .row--flex-flip .col:nth-child(1) {

-webkit-box-ordinal-group: 4;

-webkit-order: 3;

-ms-flex-order: 3;

order: 3;

}

.flexbox .row--flex-flip .col:nth-child(2) {

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

}

.flexbox .row--flex-flip .col:nth-child(3) {

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

}

@media screen and (min-width: 640px) {

.flexbox .row--flex {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

}

.col {

width: 33.333%;

}

.row--reverse .col {

margin-right: -100%;

}

.row--reverse .col:nth-child(1) {

margin-left: 66.666%;

}

.row--reverse .col:nth-child(3) {

margin-left: 33.333%;

}

}

@media screen and (max-width: 639px) {

/* visual demo */

.row--reverse {

display: table;

width: 100%;

margin: 0;

}

.row--reverse .col {

float: none;

padding: 0;

margin: 0;

}

.row--reverse .col:after {

display: block;

content: "";

height: 20px;

}

.row--reverse .col:nth-child(1) {

display: table-footer-group;

}

.row--reverse .col:nth-child(2) {

display: table-header-group;

}

}

h1 {

font-size: 20px;

margin: 30px 0;

}

p {

font-size: 16px;

font-weight: bold;

margin: 0 0 15px 0;

}

p:last-child {

margin-bottom: 0;

}

small {

font-weight: normal;

}

.island {

padding: 0 20px;

margin: 20px auto;

}

.article {

text-align: center;

color: #fff;

padding: 20px;

}

.col:nth-child(1) .article {

background: #f39c12;

}

.col:nth-child(2) .article {

background: #3498db;

}

.col:nth-child(3) .article {

background: #2c3e50;

}

#toggle {

padding: 5px 10px;

font-size: 12px;

line-height: 20px;

font-weight: bold;

text-transform: uppercase;

}

#toggle:after {

content: " " attr(data-label);

font-size: 17px;

text-transform: none;

}

#toggle[data-label="☑"] {

color: #27ae60;

}

#toggle[data-label="☐"] {

color: #c0392b;

}