同一个div怎么设置移动和PC端位置显示不一样

Question

问题描述

遇到一个问题，同一个div怎么在移动和PC端或者排版显示不一样？
在不移动div位置情况下怎么解决

问题出现的环境背景及自己尝试过哪些方法

写两个同样的div 一个在移动端显示一个在PC端显示

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
PC要这样显示:

            <div>a</div>
            <div>b</div>
            <div>c</div>

移动端：

            <div>b</div>
            <div>a</div>
            <div>c</div>
            

你期待的结果是什么？实际看到的错误信息又是什么？

 b a c 不用移动且多写div； 

Answer 1

flex布局，直接上代码了

<style>
    .flex-container{
        display: flex;
        flex-direction: column;
    }
    .flex-container>div{}
    @media (max-width:768px) {
        .a{
            order:10
        }
        .b{
            order:1
        }
        .c{
            order:9
        }
    }
</style>
<div class="flex-container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

https://developer.mozilla.org...
http://www.ruanyifeng.com/blo...