Bulma - flexbox: Create specific behavior

[hajerty]

This is about **Bulma **.

I need help

Overview of the problem

I would create this behavior with Bulma.

Description

I need to respect same width and for each width I have to visualize the box in 1, 2 or 3 columns. When first column go to new line I need that the first is the second column and not the third.

Steps to Reproduce

Expected behavior

Actual behavior

[OmprakashR]

Hi @hajerty ,

Please find the below code for your respective output behavior.

Steps 👍

1. Add .columns & .is-multiline to the parent div
2. Add .columns to the child's div with .is-6 for the same width.
3. use .is-multiline for the wrap of the 3 divs so 1 and 2 are on the same line and the 3rd comes to the next line.

Code

  <div class="columns is-gap-4 is-multiline  ">
        <div class="column is-6 "> 
            <div class="has-background-success has-text-centered has-text-white p-4">
                1
            </div>
        </div>
        <div class="column is-6"> 
            <div class="has-background-success is-p-2 has-text-centered text-white has-text-white p-4">
              2
            </div>
        </div>
        <div class="column is-6"> 
            <div class="has-background-success is-p-2 has-text-centered text-white has-text-white p-4">
               3
            </div>
        </div>
      </div>

Custume CSS for the padding ;

  .p-4{
       padding: 4em;
   }

Demo: Codepen Solution link

I hope this will help you.

Thank you.