使用CSS查询排列元素

Question

I've got a very simple website, I'm trying to write a CSS query for the elements to arrange correctly when resizing the screen. 我有一个非常简单的网站，我正在尝试编写一个CSS查询，以使元素在调整屏幕大小时能够正确排列。

You can take a look at the layout that I have and what I want to achieve. 您可以看一下我拥有的布局以及我想要实现的布局。

And this is the result that I want to get (The problem is moving #6 up): 这就是我想要得到的结果（问题在＃6上移）：

Here is the INDEX.html: 这是INDEX.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/grid.css">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/queries.css"> 
    <title>Document</title>
</head>
<body>
    <header>
       <div class="row">
            <img src="img/header.png" alt="Voltaren" class="header_image">
       </div>
    </header>
    <section class="middle">
       <div class="row_2">
            <div class="col span-1-of-3 middle_1">
                <img src="img/Middle_1.png" alt="">
            </div>
            <div class="col span-1-of-3 middle_2">
                <img src="img/Middle_2.png" alt="">
            </div>
            <div class="col span-1-of-3">
                <img src="img/Middle_3.png" alt="">
            </div>
        </div>
    </section>
    <section class="bottom">
       <div class="row_2">
            <div class="col span-2-of-3 bot_img">
                <img src="img/Bottom_1.png" alt="">
            </div>

            <div class="col span-1-of-3 ">
                <img src="img/Bottom_2.png" alt="">
            </div>
        </div>
    </section>
    <footer>
        <div class="row_2">
            <img src="img/Footer.png" alt="">
        </div>
    </footer>
</body>
</html>

And the queries.css 和querys.css

    /*-----------Small tablet to big tablet from 768 px - 1023px---------------*/


/*-----------Average phones from 481 px - 767px---------------*/
@media only screen and (max-width: 850px){
    .middle{
        padding: 0 2%;
    }

}

/*-----------Average phones from 481 px - 767px---------------*/
@media only screen and (max-width: 767px){
    .middle_1{
        width: 49%;
    }
    .middle_1 img{
        width: 95%;
    }

    .middle_2{
        width: 49%;
        margin-left: 2%;
    }  
    .middle_2 img{
        width: 95%;
    }

}

Answer 1

If You would use flexbox to Your layout, You could use order property, to rearange blocks, If You are not using flexbox, You really should. 如果要在布局中使用flexbox，则可以使用order属性来重新order块，如果不使用flexbox，则应该。 Demo fiddle 演示小提琴

<div class="container">
  <div class="block block-1 width-100">1</div>
  <div class="block block-2 width-33">2</div>
  <div class="block block-3 width-33">3</div>
  <div class="block block-4 width-33">4</div>
  <div class="block block-5 width-66">5</div>
  <div class="block block-6 width-33">6</div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.block {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

.block-1 {
  background: green;
}
.block-2 {
  background: red;
}
.block-3 {
  background: yellow;
}
.block-4 {
  background: blue;
}
.block-5 {
  background: purple;
}

.block-6 {
  background: brown;
}

.width-100 {
  width: 100%;
}
.width-66 {
  width: 66%;
}
.width-33 {
  width: 33%;
}

@media all and (max-width: 560px) {
  .width-33 {
    width: 50%;
  }
  .block-1 {
    order: 1;
  }
  .block-2 {
    order: 2;
  }
  .block-3 {
    order: 3;
  }
  .block-4 {
    order: 4;
  }
  .block-5 {
    order: 6;
    width: 100%;
  }
  .block-6 {
    order: 5;
    }
}

Answer 2

Move Div 6 between Div 4 and Div 5 in your code. 在代码中将Div 6在Div 4和Div 5之间移动。 Give it the style float: right . 为其赋予样式float: right 。 In the small view, remove the float: right and place Div 6 next to Div 4 as an inline-block . 在小视图中，删除float: right将Div 6放到Div 4旁边，作为inline-block 。

使用CSS查询排列元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-10-21 08:30:13

解决方案2
0 2016-10-21 08:21:24

使用CSS查询排列元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-10-21 08:30:13

解决方案2 0 2016-10-21 08:21:24

解决方案1
2 已采纳 2016-10-21 08:30:13

解决方案2
0 2016-10-21 08:21:24