不带引导的css中的推送和pul
不带引导的css中的推送和pul
提问于 2017-03-19 09:01:36
首先，我试图理解没有引导或任何其他框架的响应性设计，这只是一个学习练习。我试图建立一个网格，我试图调整推拉类从我自己的引导。例如，有3个框: box1、box2和方框3。现在，我试图在移动视图(<768px)上更改顺序。所以我试着下一个像box3，方框2和box1这样的订单。或者任何其他命令。没有鞋带我怎么能做到。这是我的尝试。
使用此命令，我将尝试更改媒体查询的顺序。我怎样才能用css做到这一点呢？
.box-1 {
left: 8.33%;
}
.box-6 {
right: 50%;
}
* {
box-sizing: border-box;
}
.mainContainer {
width: 1170px;
padding: 15px;
}
.mainContainer div[class^="box-"] {
float: left;
}
.box-1 {
width: 8.33%;
}
.box-2 {
width: 16.66%;
}
.box-3 {
width: 25%;
}
.box-4 {
width: 33.33%;
}
.box-5 {
width: 41.66%;
}
.box-6 {
width: 50%;
}
.box-7 {
width: 58.33%;
}
.box-8 {
width: 66.66%;
}
.box-9 {
width: 75%;
}
.box-10 {
width: 83.33%;
}
.box-11 {
width: 91.66%;
}
.box-12 {
width: 100%;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="box-"] {
width: 100%;
}
.box-1 {
left: 8.33%;
}
.box-6 {
right: 50%;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive</title>
<link href="responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mainContainer">
<div class="box-1">box1</div>
<div class="box-5">box5</div>
<div class="box-6">box6</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-19 09:28:54
你可以用flex来做
@media screen and (max-width:300px){
.mainContainer{
display:flex;
flex-flow: column;
}
.box-6{order:2;}
.box-5{order:1;}
.box-1{order:3;}
}<div class="mainContainer">
<div class="box-1">box1</div>
<div class="box-5">box5</div>
<div class="box-6">box6</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42884738
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号