Question

我确信这个问题有一个简单的答案。而不是让左侧div首先出现在移动设备上（媒体查询），就像它自然会出现一样，我将如何首先出现正确的div呢？

左侧div首先显示在桌面视图上。

    <form>
        <input  type="file"></input>
   </form>

Answer 1

首先写下right div。

Answer 2

使用媒体查询。像这样：

@media (max-width 500px){
    .right{
        float: left;
    }
}

当然，500px可能是任何东西。 Chrome开发者工具可让您模拟不同的尺寸，甚至可以预设一些电话分辨率。尽管如此，您可以通过媒体查询完全改变所有内容的格式。

See this description from w3 schools

Answer 3

通过使用媒体查询，我们可以更改所有html元素的css值。通常，媒体查询在4个常见屏幕中写入。也可以定制。

＆＃13;

@media only screen and (min-width : 1200px) {

    }
    
    @media only screen and (max-width: 992px) {

    }

    @media only screen and (max-width: 767px) {

    }

    @media only screen and (max-width: 479px) {
   
    }

＆＃13;

@media only screen and (min-width : 1200px) {

    }
    
    @media only screen and (max-width: 992px) {

    }

    @media only screen and (max-width: 767px) {

    }

    @media only screen and (max-width: 479px) {
   
    }

＆＃13;

用于移动设备767（横向）和479（纵向）。在媒体查询下使用您的问题。

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

＆＃13;

  .left {
    width: 27%;
    float: left;
    height: 50px;
    background-color: #393318;
    color: #fff;
    text-align: center;
  }
  .right {
    width: 70%;
    float: right;
    height: 50px;
    background-color: green;
    color: #fff;
    text-align: center;
  }
  @media only screen and (max-width: 479px) {
    .right {
      float: left;
    }
    .left {
      float: right;
    }
  }
  }

＆＃13;

<div class="left">leftdiv</div>
<div class="right">right div</div>

＆＃13;

Answer 4

感谢大家的贡献，但我最终找到了这个网址的解决方案：Use CSS to reorder DIVs

我使用了CSS3 Flexbox布局模块。再次感谢你！

选择首先在移动设备上显示哪些div

4 个答案: