How can i use differents span for computer and mobile?

Question

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

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

and for mobile i want to use

 <el-col  class="container">

o how can i use sm, md, lg?

What is span on a column (div)? What is `el-col`? I don't recognize this syntax. — isherwood, Mar 16 '22 at 20:05

score 1 · Accepted Answer · answered Mar 16 '22 at 20:21

1

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

<el-col :span="5" class="container hide-mobile">
<el-col  class="container show-mobile">


@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.

answered Mar 16 '22 at 20:21

Damhan Richardson

419
1
5
16

can i use directly sm, md, lg? – signup Mar 16 '22 at 20:29
@signup You would use them like: Etc.. – Damhan Richardson Mar 16 '22 at 20:33

score 1 · Answer 2 · answered Mar 16 '22 at 20:22

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.

How can i use differents span for computer and mobile?

2 Answers2