用流布局作响应式

 

 *{margin: 0px;padding: 0px}

        .wrap{width: 80%;margin: 0 auto;}

        .wrap h1{margin: 30px 0px ;text-align: center;}

        .item{display: flex;}

        .item div{flex: 1;padding: 20px 30px;}

        .item div img {width: 100%;height: auto;}

        .item div h2{margin: 30px 0px ;}

        .item div a {display: block;color: orange;text-decoration: none;margin: 20px 0px;}

        @media all and (max-width:1000px){}

        @media all and (max-width:992px){

            .wrap{flex-flow: row wrap;}

            .wrap .item {flex: 0 0 auto;width: 50%;}

        }

        @media all and (max-width:768px