CODEWITHSUNDEEP
cssresponsivebulma
Filip Egeric
Filip Egeric

Reputation: 113

Switch columns in Bulma CSS

I am using Bulma in a project and I have a problem with columns. I have two columns:

<div class="columns">
  <div class="column is-5">
    ...
  </div>
  <div class="column is-7">
    ...
  </div>
</div>

When screen is wide enough everything looks ok and when it resizes (768 px and less) the column that was on the left side of the screen is now on the top of the screen and the other is below.

My question is: What is the best way to reverse this? I need the column that was on the right to be on top next to the other column when screen is < 769px (on mobile devices).

Upvotes: 1

Views: 1672

Answers (2)

Kinya ElGrande
Kinya ElGrande

Reputation: 11

This worked for me 🤓

   @media only screen and (max-width: 768px) {
        flex-direction: column-reverse;
        display: flex;
    }

Upvotes: 0

Dennis Spierenburg
Dennis Spierenburg

Reputation: 643

You can reverse the direction of a container by using flex-direction: column-reverse; as follows:

@media (max-width: 768px) { 
   .columns{ flex-direction: column-reverse; }
   .column{ width: 100% //just to make sure it's filling all of the screen }
}

Upvotes: 3

Related Questions