Flexbox responsive columns

html:

<div class="row">
  <div class="col-6 col-sm-12">
    Left column. 50% on large screens. 100% on smaller screens.
  </div>
  <div class="col-6 col-sm-12 col-right">
    Right column. 50% on large screens. 100% on smaller screens. Has different background for visual difference.
  </div>
</div>

css:

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-6 {
  flex: 0 0 50%;
  background-color: #eee;
}

.col-right {
  background-color: #dde;
}

@media (max-width: 576px) {
  .col-sm-12 {
    flex-basis: 100%;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *