Search code examples
cssbootstrap-4element-plus

How can i use differents span for computer and mobile?

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?

Solution

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