CODEWITHSUNDEEP
bootstrap-4vuejs2flexbox
Petro Gromovo
Petro Gromovo

Reputation: 2241

How in Bootstrap/flexbox on small devices show data in 1 column

In my vue/cli 4 / Bootstrap 4.3 app I use next styles when I need on small devices show data in 1 column(on big devices in 2 columns)

/* Big Media */
.block_2columns_md { /* md */
    display: flex;
    flex-direction: row;
    padding: 4px;
    //@if ($debug_mode) {
        border: 2px dotted blue !important;
    /*}*/
    width: 100% !important;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) { /* Ipad sm */
    .block_2columns_md { /* sm */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 4px;
        //@if ($debug_mode) {
            border: 3px solid red !important;
        /*}*/
        width: 100% !important;
    }

}

It works ok for static text like :

<div class="block_2columns_md m-0">

    <div class=" p-3">
        111
    </div>

    <div class=" p-3">
        222
    </div>

</div> <!-- <div class="block_2columns_md m-0"> -->

But as my data are shown in circle , I try like :

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>
    </div>

</div>

But results are invalid, as say with 4 rows in tasks I see divs with index 0,2, but 1,3 are lost.

Which is valid way ?

MODIFIED # 2 : I make layout with flexbox classes, So I try like :

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>

    <template v-if="index % 2 !== 0"  >
        <div class=" p-3" style="border: 2px dotted yellow ">1:1 : index::{{ index }}</div>
    </template>

</div> <!-- <div v-for="nextActiveTask in tasks" -->

But it gives invalid results. How correctly?

Upvotes: 1

Views: 537

Answers (1)

Nikhil
Nikhil

Reputation: 3950

This is it:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            111
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            222
        </div>
    </div>
</div>

check:https://jsfiddle.net/sugandhnikhil/srp8mhca/

Upvotes: 1

Related Questions