How can i use differents span for computer and mobile?-CodePudding

I want to use :span="5" for computer

 <el-col :span="5" >

and for mobile i want to use

 <el-col  >

o how can i use sm, md, lg?

CodePudding user response：

You could use media queries, and display or hide them depending on screen size.

<el-col :span="5" >
<el-col  >


@media only screen and (max-width: 770px) {
    .show-mobile {
        display:block;
    }
    .hide-mobile {
        display:none;
    }
}

.hide-mobile {
    display:block;
}

.show-mobile {
    display:none;
}

This would display the first element as a block by default, setting it to none on mobile screen sizes.

The second element would be hidden by default, and show as a block on mobile.

CodePudding user response：

You can make more than on div and make certain divs visible or not for the sizes, look at :

Missing visible-** and hidden-** in Bootstrap v4

Or you can use jquery or javascrript to change items for different sizes but its easier using the above method.