-1
まず最初に、ブートストラップや他のフレームワークなしでレスポンシブなデザインを理解しようとしています。これは単なる学習の練習です。 私はグリッドを作ろうとしています。私はプッシュを適応させ、自分でブートストラップからクラスを取得しようとしています。 たとえば、3つのボックス：box1、box2、box3。今、モバイルビュー（< 768px）で注文を変更しようとしています。だから私はbox3、box2、box1のような注文をしようとしている。または他の注文。ブートストラップなしでどうすればいいですか？ これは私の試みです。ブートストラップのないCSSのプッシュ＆プル
これで、メディアクエリの順序を変更しようとしています。どのように私はCSSでこれを行うことができますか？
.box-1 {
left: 8.33%;
}
.box-6 {
right: 50%;
}
* {
\t box-sizing: border-box;
}
.mainContainer {
\t width: 1170px;
\t padding: 15px;
}
.mainContainer div[class^="box-"] {
\t float: left;
}
.box-1 {
\t width: 8.33%;
}
.box-2 {
\t width: 16.66%;
}
.box-3 {
\t width: 25%;
}
.box-4 {
\t width: 33.33%;
}
.box-5 {
\t width: 41.66%;
}
.box-6 {
\t width: 50%;
}
.box-7 {
\t width: 58.33%;
}
.box-8 {
\t width: 66.66%;
}
.box-9 {
\t width: 75%;
}
.box-10 {
\t width: 83.33%;
}
.box-11 {
\t width: 91.66%;
}
.box-12 {
\t width: 100%;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="box-"] {
width: 100%;
}
\t .box-1 {
\t \t left: 8.33%;
\t }
\t .box-6 {
\t \t right: 50%;
\t }
}<!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">
\t <div class="box-1">box1</div>
\t <div class="box-5">box5</div>
\t <div class="box-6">box6</div>
</div>
</body>
</html>
でそれを行うことができますありがとう:)これは素晴らしいです – xLittlePsycho